За допомогою 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.
Сьогоднішній огляд присвячений людям, для яких важливе питання конфіденційності в Інтернеті, та хто цінує свої…
Вперше про бренд Pro Plan почули у 1986 році, коли він став частиною американської компанії…
Страх покарання гірше самого покарання (Покарання — завжди щось конкретне, і воно все ж краще,…
Якщо ви плануєте розмістити веб-сайт в мережі Інтернет, дуже важливо знайти для нього швидкий і…
Навчання за кордоном вже давно асоціюється з якісною освітою, новими можливостями та безліччю перспектив. Але…
Вибір майстра для ремонту та перетяжки меблів – завдання, яке потребує вдумливого підходу. Адже від…