Categories: CSS

Розширені селектори CSS, про які потрібно знати

За допомогою CSS можна створювати дійсно приголомшливі сайти. А правильний підхід до використання стилів дозволяє реалізувати практично будь-які ідеї у веб-дизайні. І одним з головних моментів тут є ефективне використання селекторів. За допомогою селекторів можна надати унікальні стилі навіть самим «віддаленим» елементам в DOM. Але іноді буває так, що звичайні селектори не підходять для вирішення цього завдання. Наприклад, коли код, і відповідно елементи DOM, генерується динамічно.

На щастя для верстальників, доступ до деяких динамічних селекторів можна отримати, використовуючи розширені селектори CSS. Розширені селектори в CSS – це посилання на елемент HTML по його префіксу, суфіксу або по чомусь середньому. І цю статтю ми присвячуємо розгляду розширених селекторів, які сьогодні використовуються в CSS-стилях.

Часткові селектори

До найбільш часто використовуваних часткових селекторів відносяться наступні:

  • ^= починається з
  • $= закінчується на
  • *= містить

  1. Селектор по елементу, який починається з… (^="умова")

Ви можете вибирати елементи з DOM по префіксу (початковим знакам). Наприклад, якщо клас у елемента формується динамічно, але перші кілька знаків є унікальними, тоді вам підійде цей розширений селектор. Приклад HTML коду:

<div class="block-id_12345">
  <h3>Custom block</h3>
</div>

В цьому випадку ви можете використовувати розширений селектор по префіксу елемента, наприклад:

div[class^="block-id_"] {
  //код CSS
}

Перше, що потрібно відзначити про розширений селектор та його синтаксис – це div з квадратними дужками, що оточують атрибут class. Тег div може бути будь-яким елементом в DOM від input до span і т.д. Далі йде розширений селектор, його вигляд ^="умова", де умова – це префікс елемента (в нашому прикладі це block-id_).

  1. Селектор по елементу, який закінчується на… ($="умова")

Вибір елемента, який має повторюваний суфікс (тобто, унікальні останні знаки), буде виглядати так:

span[id$="_12345"] {
  //код CSS
}

Ви можете робити вибірку для будь-якого елемента (div, span, img і т.д.), а також для будь-якого загального атрибута (id, name, value і т.д.).

  1. Селектор по елементу, який містить… (*="умова")

Що робити, якщо у вас і префікс і суфікс формується динамічно? В цьому випадку вам підійде такий розширений CSS селектор. Приклад HTML коду:

<div class="ads2505_block-id_12345">
  <h3>Custom block</h3>
</div>

Тут можна робити вибірку по повторюваним знакам всередині класу (або іншої властивості) елемента, наприклад:

div[class*="block-id"] {
  //код CSS
}

Селектори по псевдо-елементам та псевдо-класам

Якщо говорити просто, тоді псевдо-селектори – це селектори CSS, які починаються з двокрапки. Багато з них зазвичай використовуються для посилань або інтерактивних типів елементів. Основні псевдо-селектори це:

a:hover {}
a:active {}
a:focus {}
a:visited {}
:checked {}
:first-child {}
:last-child {}

Частину з цих селекторів ми вже розглядали тут. Сьогодні ми розглянемо декілька інших псевдо-селекторів.

:not(x)

За допомогою цього псевдо-селектора можна надавати стилю для елементів, які не містять заданий селектор (x). Його корисно використовувати для однотипних елементів, що мають схожі властивості. Приклад HTML коду:

<ul class="nav">
  <li>Home</li>
  <li>About</li>
  <li class="active">Shop</li>
  <li>Contacts</li>
</ul>

За допомогою цього селектора псевдо-класу можна додати стилі для всіх елементів списку меню, крім елемента з певним класом, наприклад:

.nav li:not(.active) {
  //код CSS
}

Також цей селектор можна використовувати і для вибору атрибута, наприклад:

input:not([disabled]) {
  //код CSS
}

::first-letter

За допомогою цього селектора псевдо-класу ви можете вказати певні стилі для першої літери абзацу або елемента, наприклад:

p::first-letter {
  //код CSS
}

А якщо вам потрібно змінити стиль першої букви не у всіх абзацах, а тільки в першому параграфі, тоді ви можете об’єднати псевдо-селектори, наприклад, так:

p:first-child::first-letter {
  //код CSS
}

Такий підхід дозволить красиво стилізувати контент навіть без використання JavaScript або якихось хуків.

:first-of-type

Псевдо-клас :first-of-type використовується для додання стилів першому дочірньому елементу заданого типу. Він часто використовується, наприклад, для стилізації HTML таблиць. Якщо вам потрібно стилізувати кожну верхню клітинку tr, тоді використовуйте такий селектор:

tr:first-of-type {
  //код CSS
}

:last-of-type

А цей селектор працює протилежним способом попереднього селектору – він вибирає останній дочірній елемент заданого типу.

tr:last-of-type {
  //код CSS
}

У цій статті ми розглянули далеко не всі розширені селектори в CSS, але, навіть використання вищерозглянутих селекторів, дозволить вам створювати унікальні стилі для найскладніших елементів DOM.

Tags: CSS3HTML5

Recent Posts

Як вивчити німецьку мову легко і весело? З допомогою Beste Freunde!

Німецька часто вважається складною мовою. Так, німецька лексика має «важкий» характер. Так, є дійсно дуже… Read More

27/09/2020

Опалення і гаряча вода коли треба, а не коли включать

Тепло в домі і гаряча вода в будь-який час для багатьох мешканців багатоквартирних та приватних… Read More

19/09/2020

Інструкція по завантаженню відео з сервісу TikTok (безкоштовно та без watermark)

Якщо ви ще не чули про TikTok, тоді рекомендуємо вам спочатку ознайомитися з цим коротким… Read More

17/09/2020

Що є в бюджетному ноутбуці – на які характеристики розраховувати?

Пройшли ті часи, коли пристойний ноутбук коштував від 1000 доларів. Сьогодні можна купити досить непоганий… Read More

16/09/2020

Що краще: цифрове телебачення Т2 чи інтернет-телебачення

Сучасне життя неможливо уявити без телебачення. Воно дозволяє дізнаватися про події в Україні та світі,… Read More

02/09/2020

Гіпоалергенна подушка. Чому вона важлива?

Зараз знайдеться мало людей, в яких немає алергії на продукти або пилок рослин. Вважається, що… Read More

28/08/2020