Псевдоклассы в CSS — магия интерактивности для дизайнеров

Представьте: пользователь наводит курсор на кнопку — она плавно меняет цвет. Нажимает на неё — слегка «утапливается». Выбирает пункт в списке — и он выделяется. Всё это не JavaScript и не сложные скрипты, а псевдоклассы CSS — простой, но мощный инструмент, который превращает статичный дизайн в живой и отзывчивый.

Если вы дизайнер, который:

• Работает с веб-интерфейсами,
• Хочет лучше понимать, как реализуются интерактивные состояния,
• Стремится создавать не только красивые, но и удобные макеты,

— то эта статья для вас.

Что такое псевдоклассы?

Псевдоклассы — это специальные ключевые слова в CSS, которые позволяют применить стили к элементам в определённом состоянии. Они не требуют дополнительной разметки или скриптов — браузер сам определяет, когда элемент:

• Наведён (:hover),
• Нажат (:active),
• В фокусе (:focus),
• Или даже является первым в списке (:first-child).

Зачем их знать дизайнеру?

1. Коммуникация с разработчиками – вы сможете точнее объяснять, как должны выглядеть интерактивные элементы.
2. Прототипирование – в Figma или других инструментах можно имитировать состояния через аналоги псевдоклассов.
3. Контроль качества – понимание CSS помогает замечать ошибки в вёрстке (например, забытый :focus у кнопок).

В этой статье разберём ключевые псевдоклассы, которые полезны дизайнерам, и покажем, как их применять для создания интуитивных интерфейсов.

1. Основные псевдоклассы для интерактивности: оживляем интерфейс

Дизайн — это не только визуальная эстетика, но и поведение элементов. Псевдоклассы помогают описать, как компоненты реагируют на действия пользователя, делая интерфейс предсказуемым и приятным. Разберём ключевые из них.

:hover — «наведение»

Что делает?
Применяет стили, когда курсор оказывается над элементом.

Где использовать?

• Кнопки (изменение фона, тени, подчеркивание).
• Карточки товаров (подсветка, плавное увеличение).
• Меню (смена цвета пунктов).

Пример

.button:hover {
  background-color: #3a7bd5;
  transform: translateY(-2px); /* Лёгкий «подпрыг» */
  transition: all 0.3s ease; /* Плавность */
}

Совет: На тач-устройствах :hover может срабатывать при первом касании — учитывайте это!

:active — «нажатие»

Что делает?
Срабатывает, пока элемент удерживается нажатым (например, кнопка мыши зажата).

Где использовать?

• Эмуляция «утапливания» кнопок (например, смещение вниз или затемнение).
• Интерактивные иконки (например, «лайк» при нажатии).

Пример:

.button:active {
  transform: translateY(1px); /* Эффект вдавливания */
  box-shadow: none; /* Убираем тень */
}

:focus — «фокус»

Что делает?
Активируется, когда элемент выбран (например, клавишей Tab или кликом). Критически важен для доступности!

Где использовать?

• Поля ввода (input, textarea).
• Кнопки и ссылки (чтобы клавиатурные пользователи видели, где находятся).

Пример:

.input:focus {
  outline: 2px solid #3a7bd5; /* Чёткий контур */
  border-color: transparent; /* Опционально */
}

Совет: Никогда не удаляйте outline полностью — замените его на кастомный стиль.

:visited — «посещённые ссылки»

Что делает?
Позволяет стилизовать ссылки, по которым уже переходили.

Где использовать?

• Навигация (например, чтобы пользователь видел, какие страницы уже открывал).
• Списки статей/уроков.

Пример:

a:visited {
  color: #8e44ad; /* Фиолетовый для посещённых */
  opacity: 0.8; /* Лёгкое затемнение */
}

Ограничение: Из соображений безопасности в современных браузерах для :visited можно менять только color, background-color, и opacity.

Почему это важно для дизайнеров?

• Микровзаимодействия — именно псевдоклассы создают ощущение «отклика» интерфейса.
• Прототипирование — в Figma можно настроить аналоги :hover и :active через Interactive Components.
• UX-аудит — проверяйте, учтены ли все состояния в макетах (особенно :focus).

Далее: В следующей главе разберём псевдоклассы для работы со структурой — :nth-child(), :not() и другие.

 

2. Структурные псевдоклассы: контроль элементов без лишних классов

Дизайнеры часто сталкиваются с задачами вроде:
«Первый элемент в списке должен быть крупнее, а каждый чётный — с другим фоном».
Раньше это требовало ручного добавления классов (first, even), но сейчас структурные псевдоклассы CSS делают это автоматически.

:first-child и :last-child — крайние элементы

Зачем?
Стилизовать первый/последний элемент в блоке без лишней разметки.

Примеры:

/* Первая карточка в списке с акцентом */
.card:first-child {
  border-left: 4px solid #3a7bd5; 
}

/* Последний пункт меню без разделителя */
.menu-item:last-child {
  border-bottom: none; 
}

Где применять:

• Галереи (первое фото выделено рамкой).
• Хлебные крошки (у последнего элемента убираем стрелку).

:nth-child() — точечный выбор

Зачем?
Выбрать элементы по порядку: чётные, нечётные, конкретные позиции или даже по формуле.

Примеры:

/* Чётные строки таблицы */
tr:nth-child(even) {
  background: #f9f9f9;
}

/* Каждый 3-й элемент в сетке */
.grid-item:nth-child(3n) {
  margin-right: 0; /* Сброс отступа для новой строки */
}

/* Только первые 3 элемента */
li:nth-child(-n+3) {
  font-weight: bold;
}

Где применять:

• Сетки товаров (акценты на определённых позициях).
• Ленты новостей (визуальное разделение блоков).

:not() — исключения

Зачем?
Применить стили ко всем элементам, кроме указанных.

Пример:

/* Все кнопки, кроме disabled */
.button:not(:disabled) {
  cursor: pointer;
}

/* Все пункты списка, кроме последнего */
li:not(:last-child) {
  margin-bottom: 12px;
}

Где применять:

• Формы (стили для всех полей, кроме скрытых).
• Фильтры (подсветка всех активных, кроме текущего).

:empty — пустые элементы

Зачем?
Скрыть или стилизовать контейнеры без содержимого (например, если контент подгружается динамически).

Пример:

/* Скрыть пустые блоки с ошибками */
.error-message:empty {
  display: none;
}

/* Декоративный плейсхолдер для пустого состояния */
.card:empty::before {
  content: "Загрузка...";
  opacity: 0.5;
}

---

Почему это полезно дизайнерам?

1. Чистые макеты — не нужно просить разработчиков добавлять классы вручную.
2. Гибкость — можно быстро менять правила (например, «выделять каждый 5-й элемент» без правки HTML).
3. Динамический контент — если данные приходят из CMS, псевдоклассы автоматически адаптируются.

Практический совет:
В Figma частично можно имитировать :nth-child, создая компоненты с вариациями (например, «первый/последний элемент»).

Далее: В следующей главе разберём менее очевидные, но мощные псевдоклассы вроде :target, :checked и :has() (для работы с формами и сложными селекторами).

3. Специальные псевдоклассы: формы, состояние и продвинутые сценарии

Помимо базовой интерактивности и структурных правил, CSS предлагает узкоспециализированные псевдоклассы для работы с формами, динамическим контентом и даже условиями. Эти приёмы особенно полезны при создании сложных интерфейсов без JavaScript.

:checked — работа с переключателями

Зачем? Стилизовать чекбоксы, радиокнопки и переключатели (toggles).

Пример: кастомный чекбокс

/* Прячем стандартный input */
.input-checkbox {
  appearance: none; 
  width: 18px;
  height: 18px;
  border: 2px solid #3a7bd5;
  border-radius: 4px;
}

/* Стиль при активации */
.input-checkbox:checked {
  background-color: #3a7bd5;
  background-image: url("data:image/svg+xml,..."); /* Галочка */
}

Где использовать:

• Фильтры в интернет-магазинах,
• Интерактивные чеклисты,
• Переключатели тем (light/dark mode).

:target — CSS-аналог якорных ссылок

Зачем? Изменять стиль элемента, на который ссылаются через #id в URL.

Пример: простые табы без JS

<a href="#tab1">Вкладка 1</a> 
<a href="#tab2">Вкладка 2</a>

<div id="tab1" class="tab">Контент 1</div>
<div id="tab2" class="tab">Контент 2</div>

.tab { display: none; }
.tab:target { display: block; } /* Показываем активную вкладку */

Ограничение: Не подходит для сложных сценариев (например, анимации переключения).

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

Зачем? Выбрать элемент, который содержит определённый дочерний элемент (новинка CSS!).

Пример:

/* Карточка, внутри которой есть лейбл "New" */
.card:has(.badge-new) {
  border: 2px solid gold;
}

/* Форма, где input невалиден */
.form-group:has(:invalid) {
  background: #ffe6e6;
}

Поддержка: Работает во всех современных браузерах (с 2023 года).

:is() и :where() — группировка селекторов

Зачем? Упростить сложные правила.

Пример:

/* Без :is() */
.header h1, .header h2, .header h3 {
  color: #3a7bd5;
}

/* С :is() */
.header :is(h1, h2, h3) {
  color: #3a7bd5;
}

Разница между :is и :where:

• :is() — учитывает специфичность.
• :where() — обнуляет специфичность (полезно для переопределения стилей).

Почему это важно для дизайнеров?

• Кастомизация форм — больше не нужно мириться со стандартными чекбоксами.
• Динамика без JS — например, можно создать аккордеон только на CSS.
• Компонентный подход — :has() позволяет стилизовать целые блоки по их содержимому.

Что дальше?
В финальной части разберём:

• Как комбинировать псевдоклассы для сложных эффектов,
• Лайфхаки для анимации состояний,
• Чеклист по доступности.

4. Комбинирование псевдоклассов: продвинутые техники и чеклист доступности

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

4.1. Комбинирование псевдоклассов

Состояния + структура

Можно накладывать условия, например:

• Кнопка в фокусе и нажата

button:focus:active { transform: scale(0.98); }

• Чётные элементы, но не пустые

item:nth-child(even):not(:empty) { background: #f5f5f5; }

Динамические эффекты

Пример: анимированный список при наведении

/* Уменьшаем неподсвеченные элементы */
.list-item:hover ~ .list-item {
  opacity: 0.6;
  transform: scale(0.95);
}

Формы с валидацией

Стилизация полей в зависимости от их состояния:

/* Поле с ошибкой */
.input:invalid {
  border-color: #ff6b6b;
}

/* Плейсхолдер для невалидного поля */
.input:invalid::placeholder {
  color: #ff6b6b;
}

4.2. Анимация состояний

Псевдоклассы отлично работают с transition и animation.

Пример: плавное появление подсказки

.tooltip {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.button:hover .tooltip {
  opacity: 1;
}

Лайфхак:
Используйте will-change для оптимизации:

.button {
  will-change: transform; /* Готовит браузер к анимации */
  transition: transform 0.2s ease;
}

.button:hover {
  transform: translateY(-3px);
}

4.3. Чеклист по доступности

Псевдоклассы — не только про красоту, но и про инклюзивность:

Все интерактивные элементы имеют :focus

• Если убрали outline, замените его на кастомный стиль (например, box-shadow).

Состояния :hover и :active не обязательны для понимания интерфейса

• На тач-устройствах :hover может не работать.

Формы используют :invalid и :required

• Подсказывайте пользователю, какие поля заполнены неверно.

Тестируйте в режиме высокой контрастности

• Некоторые стили :focus могут не отображаться в Windows HC Mode.

4.4. Итог: как применять псевдоклассы в работе

1. Прототипирование
   • В Figma используйте Interactive Components для :hover и :active.
   • Добавьте состояния :focus в дизайн-систему.
2. Разработка
   • Проверяйте вёрстку, убедитесь, что все интерактивные элементы имеют состояния.
   • Оптимизируйте анимации через transition и will-change.
3. Тестирование
   • Проверьте тач-устройства (:hover ≠ :active).
   • Пройдитесь по интерфейсу клавишей Tab (доступность).

Заключение

Псевдоклассы — это мост между дизайном и разработкой. Освоив их, вы сможете:

• Точно передавать интерактивность в макетах,
• Создавать динамические интерфейсы без лишнего кода,
• Гарантировать доступность своих продуктов.

БОНУС!

Есть еще ::selection — это псевдоэлемент (а не псевдокласс!), который позволяет стилизовать выделенный пользователем текст на странице.

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

• Псевдоклассы (:hover, :focus) — выбирают элементы в определённом состоянии.
• Псевдоэлементы (::before, ::selection) — создают новые виртуальные элементы (например, декоративные линии или стили для части контента).

Как использовать ::selection?

Позволяет изменить цвет фона и текста при выделении:

::selection {
  background-color: #3a7bd5; /* Цвет фона */
  color: white; /* Цвет текста */
  text-shadow: none; /* Можно добавить тень */
}

/* Для отдельных элементов */
p::selection {
  background-color: #8e44ad;
}

Ограничения:

• Работают только свойства:
  color, background-color, text-shadow, background (не все браузеры поддерживают градиенты).
• Нельзя изменить font-size, padding, border и др.

Примеры применения

• Брендинг
  Подсветка текста в корпоративных цветах

::selection { background: #ff6b6b; color: #fff; }

• Улучшение читаемости
  Если на сайте тёмный фон, стандартное синее выделение может плохо выглядеть

::selection { background: #f1c40f; color: #111; }

• Интерактивные блоки
  Можно стилизовать выделение только в определённых областях (например, в коде)

::selection { background: #2c3e50; color: #e74c3c; }

---

Почему это важно для дизайнеров?

• Детализация — выделение текста тоже часть UX.
• Консистентность — цвет выделения может соответствовать гайдлайнам бренда.
• Доступность — контрастный цвет помогает визуально выделять текст.

Совет: Проверяйте макеты, выделяя текст — убедитесь, что сочетание цветов удобочитаемо!

---

Другие полезные псевдоэлементы

• ::first-letter — стилизация первой буквы (например, в абзацах).
• ::placeholder — изменение стиля плейсхолдера в input.
• ::before/::after — декоративные элементы (иконки, разделители).

Что ещё бывает?

1. Менее популярные, но полезные псевдоклассы

• :focus-visible — стили только при фокусе клавиатурой (игнорирует клик мышью).
• :focus-within — родительский элемент, если в нём что-то в фокусе (удобно для форм).
• :indeterminate — состояние «неопределённо» (например, чекбокс-группа).
• :disabled, :read-only — стилизация неактивных полей формы.

2. Псевдоэлементы для типографики

• ::first-line — стилизация первой строки абзаца.
• ::marker — оформление маркеров списков (кружки, цифры).

3. Экспериментальные/новые возможности

• :user-invalid (CSS4) — стилизация полей с ошибкой после взаимодействия.
• :modal — стилизация элементов в полноэкранном режиме (например, диалоги).