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

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

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

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

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

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

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

Ви можете вибирати елементи з 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_).

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

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

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

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

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

Що робити, якщо у вас і префікс і суфікс формується динамічно? В цьому випадку вам підійде такий розширений 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.