Псевдоклассы CSS
Чтобы стилизовать элемент в особом состоянии, добавьте к его селектору ключевое слово, называемое псевдоклассом.
Типичные задачи для псевдоклассов: реакция на наведение курсора на элемент, различение посещённых и непосещённых ссылок, выделение элемента, находящегося в фокусе, стилизация валидных, невалидных, обязательных или необязательных элементов формы и выбор элемента, который является первым дочерним элементом своего родителя.
Синтаксис
Сначала идёт одно двоеточие (:), а затем имя псевдокласса.
Синтаксис псевдокласса
selector:pseudo-class-name {
CSS properties
}
Интерактивные псевдоклассы
Интерактивные псевдоклассы зависят от действий пользователя. :hover применяется, пока курсор мыши находится над элементом, :focus — пока элемент в фокусе, а :active — пока он активируется; :link относится к непосещённым ссылкам, а :visited — к посещённым.
Структурные псевдоклассы
Структурные псевдоклассы зависят от положения элемента в дереве документа. :first-child соответствует первому дочернему элементу родителя, :last-child — последнему, а :nth-child(n) — n-му. :lang() тоже отнесён к этой группе, хотя он соответствует определённому языку, а не положению.