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

Псевдокласс в CSS — это ключевое слово, добавляемое к селектору, которое определяет особое состояние элемента. Например, :hover применяет стили при наведении курсора, а :focus — когда элемент получает фокус.

Основные группы псевдоклассов:

1. Состояния элементов (:hover, :active, :focus)
2. Структурные (:first-child, :nth-child())
3. Валидации (:valid, :invalid)

Пример:

button:hover {
  background-color: #ff0000;
}

li:nth-child(odd) {
  color: blue;
}

Псевдоклассы не изменяют DOM, а лишь динамически применяют стили к существующим элементам. Они всегда начинаются с двоеточия (:). В CSS3 появилось разделение на один (:hover) и два (::before) двоеточия, но для обратной совместимости оба варианта работают для псевдоклассов.