css селектор (CSS selector)

CSS селектори відіграють важливу роль у веб-розробці для стилізації веб-сторінок. Хоча багато хто знайомий із загальними селекторами, існує кілька менш поширених, але дуже корисних.

Що таке CSS селектори?

CSS селектори — це шаблони, які допомагають вибирати елементи на веб-сторінці для стилізації. Вони можуть націлювати елементи за атрибутами, класами, ідентифікаторами та іншими параметрами.

Загальні CSS селектори

Ось деякі часто використовувані:

• Селектор елемента (Element Selector): Вибирає всі елементи певного типу. Наприклад, щоб стилізувати всі елементи
:
  
div {
border: 1px solid black;
}

• Селектор класу (Class Selector): Вибирає елементи з певним класом. Якщо у нас є клас “text — large”:
  
.text - large {
font-size: 20px;
}

• Селектор ідентифікатора (ID Selector): Вибирає елемент з певним ідентифікатором. Для елемента з ID “header”:
  
#header {
background-color: blue;
}

• Селектор атрибута (Attribute Selector): Використовується для елементів з певними значеннями атрибутів. Наприклад, щоб стилізувати всі посилання, які є зовнішніми (за допомогою атрибута “rel”):
  
a[rel="external"] {
color: red;
}


Менш поширені, але корисні CSS селектори

Селектор нащадка (>)

Вибирає прямі нащадки елемента. Для батьківського елемента з класом “container”:

.container > p {
margin-left: 10px;
}


Селектор нащадка ( )

Вибирає всіх нащадків елемента. Якщо у нас є div з ID “main” і ми хочемо стилізувати всі елементи всередині нього:
`

main span {

color: green;  

}
```

Селектор сусіднього елемента (+)

Вибирає елемент, який безпосередньо йде після іншого конкретного елемента. Наприклад, після елемента
, якщо йде елемент
:

h3 + p {
font-weight: bold;
}


Селектор загального сусіда (~)

Вибирає елементи, які є сусідами іншого елемента, не обов'язково безпосередньо. Якщо у нас є div з класом “item” і ми хочемо стилізувати всі наступні сусіди з класом “detail”:

.item ~ .detail {
padding-top: 5px;
}


Селектор атрибута з частковим збігом (^=, $=, *=)

• Починається з (^=): Щоб стилізувати всі зображення, джерела яких починаються з "https://example.com/images/":
  
img[src^="https://example.com/images/"]
{
border-radius: 5px;
}

• Закінчується на ($=): Для всіх форм, метод яких закінчується на "post":
  
form[method$="post"] {
background-color: #f0f0f0;
}

• Містить (*=): Щоб стилізувати всі посилання, що містять "product" в атрибуті href:
  
a[href*="product"] {
text-decoration: underline;
}


Псевдоклас заперечення (:not())

Вибирає елементи, що не відповідають певному селектору. Наприклад, всі елементи, окрім тих, що мають клас “hidden”:

:not(.hidden) {
display: block;
}


Псевдоклас цілі (:target)

Коли фрагмент URL збігається з ID елемента. Для секції з ID “contact” у URL:
```

contact:target {

background-color: yellow;
}
```

Псевдоклас мови (:lang())

Вибирає елементи, що мають певні атрибути мови. Для елементів з lang="en-US":

:lang(en-US) {
font-family: Arial, sans - serif;
}


Псевдоклас наявності (:has())

Псевдоклас :has() використовується для вибору елементів, що містять певного нащадка або нащадка. Наприклад, щоб стилізувати div, який містить зображення:

div:has(> img) {
padding: 10px;
}


Псевдоклас вибору (::selection)

Цей псевдоклас дозволяє стилізувати частину тексту, яку користувач виділив. Наприклад, коли користувач виділяє текст у параграфі:

p::selection {
background - color: purple;
color: white;
}


Висновок

Ці менш поширені CSS селектори пропонують додаткові способи точно націлювати та стилізувати елементи.
Вони можуть покращити гнучкість і функціональність нашого CSS коду, роблячи його більш потужним і ефективним у створенні візуально привабливих та добре структурованих веб-сторінок.

Більше інформації можна знайти на https://en.kelen.cc/

Перекладено з: Useful CSS Selectors You Might Not Know