junior
Что такое псевдокласс?
Псевдокласс — это ключевое слово, добавляемое к селектору через :, которое определяет особое состояние элемента. В отличие от обычного класса, псевдокласс не указывается явно в HTML.
Группы псевдоклассов
| Группа | Псевдоклассы | Описание |
|---|---|---|
| Состояние ссылок | :link, :visited |
Непосещённые и посещённые ссылки |
| Действия пользователя | :hover, :active, :focus |
Наведение, клик, фокус |
| Структурные | :first-child, :last-child, :nth-child(n) |
Позиция элемента среди соседей |
| Типовые | :first-of-type, :last-of-type, :nth-of-type(n) |
Позиция среди элементов того же типа |
| Отрицание | :not(selector) |
Элементы, не подходящие под селектор |
| Формы | :checked, :disabled, :required, :valid |
Состояние элементов форм |
Пример использования
Пример
a:link { color: blue; }
a:visited { color: purple; }
a:hover { text-decoration: none; background-color: yellow; }
a:active { color: red; }
Порядок псевдоклассов ссылок (LVHA)
Для корректной работы псевдоклассы ссылок указываются в порядке: :link → :visited → :hover → :active (мнемоника LoVe HAte).
На собеседовании: интервьюер хочет услышать определение и знание основных групп. Частая ошибка — путать псевдоклассы (
:hover) с псевдоэлементами (::before), а также не знать правило порядка LVHA.