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

CSS псевдоклассы и псевдоэлементы — это мощные селекторы, позволяющие стилизовать элементы в зависимости от их состояния или создавать виртуальные элементы. Понимание этих селекторов открывает возможности для продвинутой стилизации без дополнительного HTML или 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

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

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

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

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

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

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

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

При работе с псевдоклассами и сложными селекторами полезно понимать специфичность 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
• ✅ Стилизовать состояния форм и валидацию
• ✅ Реализовывать сложные UI паттерны
• ✅ Улучшать доступность с :focus-visible

Основные выводы:

1. Используйте :focus-visible для доступности
2. :has() открывает новые возможности для родительских селекторов
3. ::before и ::after отлично подходят для декоративных элементов
4. Комбинируйте псевдоклассы для точной стилизации
5. Помните о производительности при сложных селекторах

Практикуйтесь с интерактивными примерами выше и создавайте красивые интерфейсы!

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

Совет: Попробуйте изменить код в интерактивных примерах выше, чтобы увидеть, как работают разные псевдоклассы и псевдоэлементы в реальном времени!