CSS Псевдоклассы и Псевдоэлементы: Полное руководство 2025
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:
/* Каждый третий элемент */
:nth-child(3n) {
}
/* Первые 3 элемента */
:nth-child(-n + 3) {
}
/* Все, кроме первых 3 */
:nth-child(n + 4) {
}
/* Нечётные */
:nth-child(odd) {
}
/* Чётные */
:nth-child(even) {
}
3. Псевдоклассы форм
Валидация и состояния форм
4. Продвинутые селекторы
:has() — Родительский селектор
Селектор :has() для родителей
:target — Элемент по якорю
Навигация с :target
Мощные псевдоэлементы
1. ::before и ::after
Псевдоэлементы ::before и ::after
2. Кастомные счётчики
CSS счётчики с ::before
3. ::first-letter и ::first-line
Типографика с ::first-letter
4. ::selection — Стилизация выделения
Кастомное выделение текста
Практические примеры
Кастомный чекбокс
Кастомный чекбокс без JavaScript
Состояние загрузки (Skeleton)
Skeleton loader эффект
Инструменты для работы с CSS
При работе с псевдоклассами и сложными селекторами полезно понимать специфичность CSS:
CSS калькулятор специфичности
Анализируйте специфичность CSS селекторов для понимания правил каскада
Попробовать →
Для создания визуальных эффектов с градиентами в псевдоэлементах:
CSS Gradient генератор
Создавайте линейные, радиальные и конические градиенты с визуальным редактором
Попробовать →
Советы по производительности
- Псевдоэлементы создают реальные элементы — они влияют на render tree
- Сложные селекторы замедляют рендеринг — держите специфичность разумной
- Избегайте дорогих свойств — тени, фильтры в ::before/::after
- Используйте 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
Основные выводы:
- Используйте
:focus-visibleдля доступности :has()открывает новые возможности для родительских селекторов::beforeи::afterотлично подходят для декоративных элементов- Комбинируйте псевдоклассы для точной стилизации
- Помните о производительности при сложных селекторах
Практикуйтесь с интерактивными примерами выше и создавайте красивые интерфейсы!
Полезные ресурсы
CSS калькулятор специфичности
Анализируйте специфичность CSS селекторов для понимания правил каскада
Попробовать →
CSS Gradient генератор
Создавайте линейные, радиальные и конические градиенты с визуальным редактором
Попробовать →
Совет: Попробуйте изменить код в интерактивных примерах выше, чтобы увидеть, как работают разные псевдоклассы и псевдоэлементы в реальном времени!