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

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

css
div:hover {
  background-color: #f89b4d;
}

Псевдоклассы дают возможность стилизовать элемент на основе не только отношений в DOM-дереве, но и основываясь на внешних факторах, таких как история посещений (например, :visited), состояние содержимого (вроде :checked у некоторых элементов формы) или позиции курсора мыши (например, :hover определяет, находится ли курсор мыши над элементом).

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

Синтаксис

selector:pseudo-class {
  property: value;
}

Как и с обычными классами, можно совмещать вместе в одном селекторе любое число псевдоклассов.

Список стандартных псевдоклассов

Спецификации

Specification
HTML Standard
# pseudo-classes
Selectors Level 4
CSS Basic User Interface Module Level 4

Смотрите также