Для чего нужны псевдоклассы?

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

Псевдоклассы (pseudo-classes) — это ключевые слова в CSS, которые позволяют выбирать и стилизовать элементы на основе их состояния или позиции в дереве DOM. Они начинаются с одного двоеточия (:) и дополняют обычные селекторы динамическим и структурным поведением.

Основные категории псевдоклассов

Интерактивные состояния пользователя

Эти псевдоклассы срабатывают в ответ на действия пользователя:

/* Когда пользователь наводит мышь */
a:hover {
  color: #ff6b6b;
  text-decoration: underline;
}

/* Когда элемент активен (нажата кнопка мыши) */
button:active {
  transform: scale(0.95);
  background-color: #4c6ef5;
}

/* Когда элемент в фокусе (через клавиатуру или клик) */
input:focus {
  outline: 2px solid #5c7cfa;
  box-shadow: 0 0 0 4px rgba(92, 124, 250, 0.1);
}

Структурные селекторы

Позволяют выбирать элементы по их позиции среди соседних элементов:

/* Первый дочерний элемент */
li:first-child {
  font-weight: bold;
}

/* Последний дочерний элемент */
li:last-child {
  border-bottom: none;
}

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

/* Элементы, которые являются единственными потомками */
p:only-child {
  margin-bottom: 0;
}

Состояния формы

Для работы с элементами ввода:

/* Когда инпут пуст */
input:placeholder-shown {
  border-color: #ccc;
}

/* Когда чекбокс отмечен */
input:checked {
  background-color: #51cf66;
  border-color: #51cf66;
}

/* Когда элемент отключен */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Когда инпут невалидный */
input:invalid {
  border-color: #fa5252;
}

Прочие полезные псевдоклассы

/* Родитель, у которого есть дочерние элементы */
section:has(> h1) {
  padding-top: 2rem;
}

/* Элементы, соответствующие селектору */
a:is(.primary, .cta) {
  font-weight: 600;
}

/* Инвертирует селектор */
button:not(:disabled) {
  cursor: pointer;
}

Практическое применение

1. Улучшение UX: Визуальная обратная связь при взаимодействии пользователя 2. Упрощение HTML: Не нужно добавлять классы для каждого состояния 3. Производительность: Меньше JavaScript кода для обработки событий 4. Доступность: :focus помогает пользователям с клавиатурой 5. Адаптивность: :nth-child() для создания сложных сеток без доп классов

Псевдоклассы — это мощный инструмент, который позволяет создавать интерактивные и адаптивные интерфейсы, минимизируя количество кода и улучшая производительность приложения.