CSS Псевдоклассы и псевдоэлементы: полное руководство

Псевдоклассы стилизуют элемент по его состоянию или позиции, а псевдоэлементы создают виртуальные элементы, которых нет в разметке. Вместе они закрывают то, ради чего раньше добавляли лишние теги или писали JavaScript.

Разница между псевдоклассами и псевдоэлементами

Псевдоклассы (:)

Нацеливаются на элементы в зависимости от их состояния или позиции:

button:hover {
} /* Состояние при наведении */
li:first-child {
} /* Позиция в DOM */
input:valid {
} /* Валидация формы */

Псевдоэлементы (::)

Создают или нацеливаются на виртуальные элементы:

p::first-line {
} /* Часть элемента */
div::before {
} /* Создание нового элемента */
::selection {
} /* Стилизация выделения */

Псевдоклассы пишут с одним двоеточием :, псевдоэлементы с двумя ::.

Основные псевдоклассы

1. Интерактивные состояния

:focus или :focus-visible

Самая частая ошибка в CSS-доступности выглядит так:

/* Никогда так не делайте */
:focus {
	outline: none;
}

Обводку убирают, потому что она «портит дизайн» при клике мышью. Но вместе с мышью её теряет и человек, который ходит по сайту с клавиатуры. Он просто перестаёт видеть, где находится.

Для этого и появился :focus-visible. Браузер сам решает, показывать ли кольцо фокуса: при клике мышью — нет, при переходе по Tab — да. Вам не нужно ничего отслеживать.

/* Кольцо появится по Tab, но не по клику мышью */
.button:focus-visible {
	outline: 3px solid #f39c12;
	outline-offset: 2px;
}

Если обводка по умолчанию не нравится, замените её на свою, но не удаляйте. И не заменяйте на один box-shadow: в режиме высокой контрастности Windows тени не рисуются, а outline рисуется.

2. Структурные псевдоклассы

Полезные паттерны nth-child:

/* Каждый третий элемент */
:nth-child(3n) {
}

/* Первые 3 элемента */
:nth-child(-n + 3) {
}

/* Все, кроме первых 3 */
:nth-child(n + 4) {
}

/* Нечётные */
:nth-child(odd) {
}

/* Чётные */
:nth-child(even) {
}

3. Псевдоклассы форм

4. Продвинутые селекторы

:has() — Родительский селектор

:has() — тот самый «родительский селектор», которого ждали двадцать лет. С конца 2023 года он Baseline и работает во всех основных браузерах, так что экзотикой его считать уже поздно.

Стилизовать элемент по тому, что лежит внутри него, раньше можно было только из JavaScript. Теперь это одна строка CSS.

:target — Элемент по якорю

Псевдоэлементы

1. ::before и ::after

Стрелка у внешней ссылки выше — текстовый символ в content, и он зависит от шрифта. В одном начертании стрелка выглядит тонкой, в другом съезжает по базовой линии. Предсказуемее подставить иконку картинкой: content: '' плюс background-image с SVG прямо в правиле, без отдельного файла и лишнего запроса. Разметку для такой вставки нужно экранировать, и удобнее это сделать в кодировщике SVG для CSS, чем вручную заменять угловые скобки и кавычки.

2. Кастомные счётчики

3. ::first-letter и ::first-line

4. ::selection — Стилизация выделения

Практические примеры

Кастомный чекбокс

Состояние загрузки (Skeleton)

Инструменты для работы с CSS

Когда селекторы разрастаются, приходится считать специфичность:

Для создания визуальных эффектов с градиентами в псевдоэлементах:

Советы по производительности

1. Псевдоэлементы создают реальные узлы и попадают в render tree.
2. Разросшиеся селекторы замедляют рендеринг, держите специфичность в разумных пределах.
3. Тени и фильтры в ::before и ::after обходятся дорого.
4. CSS containment ограничивает область пересчёта стилей.

/* Оптимизация для анимаций в псевдоэлементах */
.element::before {
	content: '';
	will-change: transform;
	/* Будет рендериться на отдельном слое */
}

Поддержка браузерами

Почти всё из перечисленного работает везде:

Распространённые ошибки

1. Забывание content для ::before/::after

/* ❌ Не будет работать */
.element::before {
	display: block;
	width: 100px;
}

/* ✅ Правильно */
.element::before {
	content: '';
	display: block;
	width: 100px;
}

2. Двойное двоеточие для псевдоклассов

/* ❌ Неправильно */
button::hover {
	background: red;
}

/* ✅ Правильно */
button:hover {
	background: red;
}

3. Попытка стилизовать ::before у элементов замены

/* ❌ Не работает для img, input, br */
img::before {
	content: 'Иконка';
}

/* ✅ Оберните в контейнер */
.image-wrapper::before {
	content: 'Иконка';
}

Заключение

На псевдоклассах и псевдоэлементах держится изрядная часть повседневного CSS. С ними делают:

• интерактивные элементы без JavaScript;
• декоративные вставки без лишних тегов в HTML;
• подсветку состояний формы и валидации;
• составные компоненты вроде кастомных чекбоксов и скелетонов;
• нормальный фокус с :focus-visible.

Что запомнить

1. Для фокуса берут :focus-visible, а не :focus, и обводку не удаляют.
2. :has() наконец-то даёт стилизовать родителя по содержимому.
3. ::before и ::after держат на себе всю декорацию, но требуют content.
4. Псевдоклассы комбинируются, и этим стоит пользоваться.
5. Длинные цепочки селекторов бьют по скорости рендеринга.

Полезные ресурсы

Код в примерах выше правится прямо на странице, результат обновляется сразу.