Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 06.10.2022)
61330
осіб
264
літаків
225
гелікоптерів
2449
танків
5064
ББМ
1424
артилерія
176
ППО
344
РСЗВ
3854
машин
15
кораблі і катери
Розширені селектори 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.

 

 

Напишіть тут свою думку/питання

Ваша пошта не публікуватиметься.