За допомогою 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.
Потрібно більше інформації?
