Урок · CSS

Псевдоклассы: стили для состояний

Редакция PraktumОбновлено 24 октября 202616 минут на урок с практикойУровень: новичок

Псевдокласс — часть селектора после одного двоеточия, которая выбирает элемент в определённом состоянии или положении: на него навели мышь (:hover), он в фокусе (:focus-visible), поле отмечено (:checked), это первый ребёнок (:first-child). Псевдоклассы избавляют от лишних классов в HTML.

Зачем этот урок сейчас

Интерфейс должен отвечать на действия: кнопка темнеет при наведении, поле краснеет при ошибке, у ссылки видна рамка, когда в неё перешли с клавиатуры. Без псевдоклассов пришлось бы переключать классы JavaScript-ом. С ними CSS делает это сам.

Минимальный пример

.button { background: #2a62d9; color: #fff; }
.button:hover { background: #244dc8; }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 3px solid #ffbc42; outline-offset: 3px; }
.button:disabled { opacity: .55; cursor: not-allowed; }

Одна кнопка — пять состояний без единой строки JavaScript. :hover срабатывает при наведении, :active — пока кнопку держат нажатой, :focus-visible — при переходе клавишей Tab, :disabled — если у кнопки есть атрибут disabled.

Основные псевдоклассы

Фокус клавиатуры: focus или focus-visible

:focus срабатывает при любом фокусе, в том числе после клика мышью — поэтому дизайнеры и убирают рамку. :focus-visible браузер включает, когда рамка действительно нужна: при навигации с клавиатуры и в текстовых полях.

a:focus-visible,
button:focus-visible {
  outline: 3px solid #ffbc42;
  outline-offset: 3px;
}

Не пиши outline: none без равноценной замены: человек с клавиатурой перестанет видеть, где он находится. :focus-within срабатывает на родителе, если фокус у любого потомка, — удобно подсветить всю форму поиска, когда курсор в поле.

Порядок состояний ссылки

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

a { color: #2a62d9; }
a:visited { color: #6b4fbb; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid currentColor; }
a:active { color: #1b3f99; }

Для :visited браузеры разрешают менять только цвета: это защита приватности, чтобы сайт не мог вычислить, где ты был.

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

input:checked + label { font-weight: 700; }
input:required + label::after { content: " *"; color: #c93636; }
input:user-invalid { border-color: #c93636; }
button:disabled { opacity: .55; cursor: not-allowed; }

:invalid срабатывает сразу: пустое обязательное поле невалидно ещё до того, как человек что-то ввёл, и форма загорается красным при загрузке. :user-invalid ждёт, пока пользователь взаимодействовал с полем, и подходит для подсветки ошибок лучше. В старых браузерах его заменяет связка :invalid:not(:placeholder-shown).

Формула :nth-child

В скобках :nth-child() пишут число, ключевое слово или формулу an+b, где n перебирает 0, 1, 2…

:nth-child считает всех соседей подряд, а :nth-of-type — только элементы того же тега. Если в контейнере перемешаны h2 и p, p:nth-child(2) может ничего не выбрать, а p:nth-of-type(2) выберет второй абзац.

:not, :is, :where и :has

.menu li:not(:last-child) { border-bottom: 1px solid #e5e7eb; }
:is(h1, h2, h3):hover { color: #2a62d9; }
:where(.article) a { color: inherit; }
.card:has(img) { padding-top: 0; }
label:has(input:checked) { background: #eef2ff; }

:is() сокращает длинные списки селекторов. :where() делает то же, но с нулевой специфичностью — удобно для базовых стилей, которые легко перебить. :has() впервые позволил выбирать родителя по содержимому: карточка с картинкой, подпись с отмеченной галочкой, форма с невалидным полем.

Специфичность псевдоклассов

Псевдокласс весит как класс: a:hover перебивает a, но проигрывает .nav a. Исключения: :where() всегда весит ноль, а :is(), :not() и :has() берут вес самого тяжёлого селектора в скобках. :is(#menu, a) весит как id — это легко забыть и потом удивляться, почему стиль не перебивается.

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

Частые ошибки

• Прячут важное действие только под :hover — на телефоне наведения нет.
• Пишут outline: none и не дают замены для фокуса.
• Красят :invalid сразу, и пустая форма горит красным до первого ввода.
• Ставят :hover после :active, и нажатие не видно.
• Пишут сложный :nth-child(4n+2) там, где понятнее отдельный класс.

Доступность

Видимый фокус — обязательное требование доступности: без него сайтом нельзя пользоваться с клавиатуры. Не передавай состояние только цветом — у ошибки в поле должен быть текст. Наведение не существует на сенсорных экранах, поэтому всё, что появляется по :hover (подсказки, подменю), должно открываться и по фокусу или клику.

Поддержка браузерами

Базовые псевдоклассы работают везде. :focus-visible, :is() и :where() поддерживаются всеми актуальными браузерами. :has() и :user-invalid появились позже и доступны в свежих версиях Chrome, Safari и Firefox — для старых браузеров оставляй стили, которые не ломают страницу без них.

.list li:not(:last-child) { border-bottom: 1px solid #e5e7eb; }
.list li:nth-child(even) { background: #f8fafc; }
.button:hover { background: #244dc8; }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 3px solid #ffbc42; outline-offset: 3px; }
.button:disabled { opacity: .55; cursor: not-allowed; }