Категорії: 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.

 

Share

Останні пости

202ЗСУ

SebWeo щиро вітає усіх із Новим роком! Бажаємо особистих перемог, а головне, найбажанішої — швидкої… Читати далі

31/12/2022

Який подарунок можна вручити батькові на День захисника України?

У кожної української сім'ї є свої певні традиції та улюблені свята, особливо усі ми любимо… Читати далі

19/08/2022

Демокріт

Ми потребуємо не стільки допомоги друзів, а більше тієї впевненості, що ми її отримаємо Демокріт… Читати далі

21/02/2022

Майк Тайсон

Коли мені важко, я завжди нагадую собі про те, що якщо я здамся — краще… Читати далі

12/02/2022

25 корисних порад та рішень jQuery, які ви повинні знати

jQuery – це швидка і досить невелика бібліотека JavaScript. Вона спрощує створення інтерактивних та приголомшливих… Читати далі

09/02/2022

Йоганн Вольфганг фон Гете

Кожен чує тільки те, що він розуміє Йоганн Вольфганг фон Гете   Читати далі

03/02/2022