За допомогою 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.
Коли мені хочеться освіжити свій гаджет, прикупити ігрову консоль чи, наприклад, розумний пилосос для дому,…
Уявіть, що ваш основний сайт — це великий будинок, що стоїть на вашій земельній ділянці…
Є два способи командувати жінкою, але ніхто їх не знає Френк МакКінні Кін Хаббард
Найгірше, що в інформаційній війні завжди програє той, хто говорить правду, адже він обмежений правдою,…
Якщо тобі колись захочеться знайти таку людину, яка зможе здолати будь-яку, навіть найважчу біду і…
Уявіть, що ви відкрили піцерію у Києві. Ваша піца настільки смачна, що її хочуть замовити…