CSS псевдокласи та псевдоелементи

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

Псевдокласи

Псевдокласи — це селектори, які дозволяють вибирати елементи в певному стані (наприклад, при наведенні курсору).

Синтаксис псевдокласу

css

selector:pseudo-class {
  /* styles */
}

Приклади популярних псевдокласів

:hover — при наведенні миші.
:focus — коли елемент отримує фокус.
:nth-child(n) — для вибору елемента за його порядковим номером.
:checked — для вибраних чекбоксів або радіокнопок.
:not(selector) — вибирає елементи, які не відповідають селектору.

Приклад псевдокласу

css

button:hover {
  background-color: #007BFF;
  color: white;
}

Приклад використання:

Псевдокласи дозволяють створювати інтерактивні елементи, такі як кнопки, які змінюють вигляд під час взаємодії.

Псевдоелементи

Псевдоелементи дозволяють стилізувати частини елементів (наприклад, першу літеру або додавати текст перед елементом).

Синтаксис псевдоелемента

css

selector::pseudo-element {
  /* styles */
}

Приклади популярних псевдоелементів

::before — вставляє вміст перед елементом.
::after — вставляє вміст після елемента.
::first-letter — стилізує першу літеру тексту.
::first-line — стилізує перший рядок тексту.
::placeholder — стилізує текст всередині полів введення.

Приклад псевдоелемента

css

p::first-line {
  font-weight: bold;
}

button::after {
  content: " →";
}

Подвійна двокрапка:

Сучасний CSS використовує подвійні двокрапки (::) для псевдоелементів, але також дозволяється одна двокрапка (:) для зворотної сумісності.

Таблиця порівняння

Особливість	Псевдокласи	Псевдоелементи
Синтаксис	`:pseudo-class`	`::pseudo-element`
Фокус	На стані елемента	На частині елемента
Приклади	`:hover`, `:focus`, `:nth-child`	`::before`, `::after`
Підтримка браузерами:

Перед використанням переконайтеся, що потрібний псевдоклас або псевдоелемент підтримується всіма цільовими браузерами!

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань