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

CSS псевдоклассы и псевдоэлементы — это мощные селекторы, позволяющие стилизовать элементы в зависимости от их состояния или создавать виртуальные элементы. Понимание этих селекторов открывает возможности для продвинутой стилизации без дополнительного HTML или JavaScript.

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

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

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

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

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

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

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

Важно: Псевдоклассы используют одно двоеточие :, псевдоэлементы — два ::

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

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

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() — Родительский селектор

: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;
	/* Будет рендериться на отдельном слое */
}

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

Большинство псевдоклассов и псевдоэлементов имеют отличную поддержку:

| Селектор | Поддержка | | ------------------------------ | ----------------------------- | | :hover, :focus, :active | ✅ Все браузеры | | :nth-child(), :first-child | ✅ Все браузеры | | ::before, ::after | ✅ Все браузеры | | :is(), :where() | ✅ Современные браузеры | | :has() | ⚠️ Только современные (2023+) | | :focus-visible | ✅ Современные браузеры |

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

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. Помните о производительности при сложных селекторах

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

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

MDN: Псевдоклассы

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

---

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