Псевдокласс

Псевдокласс — это ключевое слово, добавляемое к селектору в каскадных таблицах стилей (CSS), которое определяет особое состояние или положение выбранного элемента (или элементов) в структуре документа (DOM). В отличие от классов, задаваемых в HTML-разметке, псевдоклассы не существуют в исходном коде страницы и не требуют изменения HTML; они динамически вычисляются браузером на основе действий пользователя, структуры документа или других условий. Псевдоклассы позволяют применять стили к элементам, не изменяя их разметку, что делает их ключевым инструментом для создания интерактивных и адаптивных интерфейсов без использования JavaScript.

История и стандартизация

Концепция псевдоклассов была впервые реализована в спецификации CSS уровня 1 (CSS1), опубликованной Консорциумом Всемирной паутины (W3C) в 1996 году. Первоначально были определены только три псевдокласса: :link, :visited и :active. Они предназначались для стилизации гиперссылок в зависимости от их состояния (непосещённая, посещённая, активная). В CSS2 (1998 год) набор был расширен: появились псевдоклассы :hover, :focus, :first-child и :lang(). Спецификация CSS2 также ввела различие между псевдоклассами и псевдоэлементами (например, ::before и ::after), которые, в отличие от псевдоклассов, создают виртуальные элементы, не существующие в DOM.

Наибольшее развитие псевдоклассы получили в спецификации CSS3 (модуль «Selectors Level 3», 2011 год). В неё были добавлены структурные псевдоклассы (:nth-child(), :nth-of-type(), :empty и другие), псевдоклассы отрицания (:not()) и целевые псевдоклассы (:target). В 2018 году была опубликована спецификация «Selectors Level 4», которая продолжает расширять возможности: введены псевдоклассы для работы с формами (:focus-visible, :focus-within, :placeholder-shown), временными рядами (:current, :past, :future), а также более гибкие версии существующих псевдоклассов (например, :nth-child(An+B of S)). На момент 2024 года спецификация «Selectors Level 4» находится в статусе черновика (Working Draft), но многие её элементы уже реализованы в современных браузерах.

Классификация псевдоклассов

Псевдоклассы можно разделить на несколько основных категорий по их функциональному назначению.

Динамические псевдоклассы (псевдоклассы состояния)

Эти псевдоклассы реагируют на действия пользователя или состояние элемента. Они наиболее часто используются для создания интерактивности.

• :hover — применяется, когда курсор мыши находится над элементом, но не обязательно активирует его. Используется для визуальной обратной связи (подсветка, изменение цвета фона).
• :active — применяется в момент активации элемента (например, при нажатии кнопки мыши). Действует до тех пор, пока кнопка не будет отпущена.
• :focus — применяется, когда элемент получает фокус ввода (например, при клике на текстовое поле или переходе к нему с помощью клавиши Tab). Используется для стилизации полей ввода, кнопок и ссылок.
• :focus-visible — применяется, когда элемент получает фокус, но только если браузер определяет, что фокус был установлен с клавиатуры (а не с помощью мыши). Введён для улучшения доступности (accessibility), чтобы не показывать фокус-кольцо при клике мышью, но показывать его при навигации с клавиатуры.
• :focus-within — применяется к родительскому элементу, если любой из его дочерних элементов находится в фокусе. Позволяет стилизовать контейнер (например, форму) при фокусе на одном из его полей.
• :link — применяется к непосещённым гиперссылкам.
• :visited — применяется к посещённым гиперссылкам. Из соображений конфиденциальности (приватности) браузеры ограничивают стили, которые можно применить к этому псевдоклассу (например, нельзя изменить цвет фона или шрифт, можно — только цвет текста).
• :target — применяется к элементу, чей идентификатор (id) соответствует фрагменту URL (якорю). Например, при переходе по ссылке #section2 псевдокласс :target будет применён к элементу с id="section2".

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

Эти псевдоклассы выбирают элементы на основе их положения в дереве документа (DOM) относительно родительского элемента или других элементов того же типа.

• :first-child — выбирает элемент, который является первым дочерним элементом своего родителя.
• :last-child — выбирает элемент, который является последним дочерним элементом своего родителя.
• :nth-child(An+B) — выбирает дочерние элементы по формуле, где A — шаг, B — смещение. Например, :nth-child(2n+1) выбирает все нечётные элементы (первый, третий, пятый). Ключевые слова odd (нечётные) и even (чётные) являются сокращениями.
• :nth-last-child(An+B) — то же, что и :nth-child(), но отсчёт ведётся с конца списка дочерних элементов.
• :first-of-type — выбирает первый элемент определённого типа среди дочерних элементов родителя.
• :last-of-type — выбирает последний элемент определённого типа среди дочерних элементов родителя.
• :nth-of-type(An+B) — выбирает элементы определённого типа по формуле, игнорируя другие типы элементов.
• :nth-last-of-type(An+B) — то же, что и :nth-of-type(), но отсчёт с конца.
• :only-child — выбирает элемент, если он является единственным дочерним элементом своего родителя.
• :only-of-type — выбирает элемент, если он является единственным элементом своего типа среди дочерних элементов родителя.
• :empty — выбирает элементы, которые не имеют дочерних узлов (включая текстовые узлы и пробелы).

Псевдоклассы, связанные с формами

Эти псевдоклассы предназначены для стилизации элементов форм (input, textarea, select) в зависимости от их состояния и валидации.

• :enabled — выбирает доступные (включённые) элементы форм.
• :disabled — выбирает недоступные (отключённые) элементы форм.
• :checked — выбирает отмеченные (выбранные) элементы, такие как флажки (checkbox) и переключатели (radio).
• :indeterminate — выбирает элементы, находящиеся в неопределённом состоянии (например, флажок, который не отмечен и не снят, или прогресс-бар без значения).
• :valid и :invalid — выбирают элементы форм в зависимости от того, прошли ли они валидацию по атрибутам required, pattern, type и т.д.
• :in-range и :out-of-range — выбирают элементы с числовым диапазоном (атрибуты min и max), значение которых находится в пределах или за пределами этого диапазона.
• :required и :optional — выбирают элементы форм в зависимости от наличия атрибута required.
• :placeholder-shown — выбирает элементы, в которых в данный момент отображается текст-подсказка (placeholder).
• :user-valid и :user-invalid — более новые псевдоклассы, которые применяются только после того, как пользователь взаимодействовал с элементом (например, после того, как он покинул поле ввода). Позволяют избежать показа ошибок валидации до того, как пользователь начал ввод.

Псевдоклассы отрицания и логические

• :not() — принимает в качестве аргумента селектор (в CSS3 — простой селектор, в CSS4 — любой селектор) и выбирает все элементы, которые ему не соответствуют. Например, input:not([type="submit"]) выберет все поля ввода, кроме кнопок отправки.
• :is() — принимает список селекторов, разделённых запятыми, и выбирает элементы, соответствующие любому из них. Позволяет упростить длинные цепочки селекторов. Например, :is(header, main, footer) p выберет все абзацы внутри header, main и footer.
• :where() — функционально аналогичен :is(), но имеет нулевую специфичность (вес селектора). Это позволяет легко переопределять стили, не беспокоясь о каскаде.
• :has() — псевдокласс-родитель, который выбирает элемент, если он содержит определённый дочерний элемент или потомка. Например, figure:has(figcaption) выберет все элементы <figure>, внутри которых есть <figcaption>. Этот псевдокласс долгое время не поддерживался браузерами, но начиная с 2022-2023 годов получил широкую поддержку.

Другие псевдоклассы

• :root — выбирает корневой элемент документа. В HTML это всегда элемент <html>.
• :lang() — выбирает элементы, язык содержимого которых соответствует указанному коду (например, :lang(ru)).
• :dir() — выбирает элементы с определённым направлением текста (ltr — слева направо, rtl — справа налево).
• :defined — выбирает элементы, которые являются частью определённого пользовательского элемента (Web Component).
• :host и :host-context() — используются внутри теневого DOM (Shadow DOM) для стилизации самого хоста пользовательского элемента.

Синтаксис и использование

Псевдокласс всегда начинается с двоеточия (:) и следует за селектором (или без него, если применяется ко всем элементам). В CSS3 и более поздних версиях псевдоэлементы (например, ::before) пишутся с двумя двоеточиями, чтобы отличать их от псевдоклассов с одним двоеточием. Однако для обратной совместимости браузеры поддерживают и одно двоеточие для псевдоэлементов, определённых в CSS2 (:before, :after, :first-line, :first-letter).

Пример использования: ```css / Все ссылки, при наведении мыши, становятся красными / a:hover { color: red; }

/ Каждый второй элемент списка (чётные) имеет серый фон / li:nth-child(even) { background-color: #f2f2f2; }

/ Поле ввода, которое не прошло валидацию, имеет красную рамку / input:invalid { border: 2px solid red; } ```

Псевдоклассы могут комбинироваться с другими селекторами и друг с другом (например, a:visited:hover — посещённая ссылка, на которую наведён курсор).

Ограничения и особенности

• Производительность: Некоторые псевдоклассы, особенно :nth-child() с большими наборами данных или сложные комбинации :has(), могут незначительно влиять на производительность рендеринга, так как браузеру приходится пересчитывать соответствие при каждом изменении DOM. Однако в современных браузерах этот эффект обычно незаметен.
• Приватность: Псевдокласс :visited имеет серьёзные ограничения на стилизацию, чтобы предотвратить возможность отслеживания пользователя через историю браузера. Браузеры разрешают изменять только цвет текста (color) и некоторые другие свойства, не влияющие на геометрию элемента.
• Специфичность: Псевдоклассы, такие как :is(), :not() и :has(), имеют специфичность, равную специфичности наиболее специфичного селектора в их аргументах. Псевдокласс :where() всегда имеет нулевую специфичность.
• Поддержка браузерами: Хотя большинство псевдоклассов из CSS3 поддерживаются всеми современными браузерами, некоторые нововведения из «Selectors Level 4» (например, :has(), :focus-visible, :user-invalid) могут отсутствовать в старых версиях браузеров (Internet Explorer 11 не поддерживает многие из них). Перед использованием рекомендуется проверять поддержку на ресурсах вроде Can I use.

Значение в веб-разработке

Псевдоклассы являются неотъемлемой частью современного CSS. Они позволяют реализовывать сложные интерактивные сценарии (анимации при наведении, подсветка активных элементов меню, валидация форм в реальном времени) без использования JavaScript. Структурные псевдоклассы упрощают вёрстку списков, таблиц и сеток, позволяя чередовать стили строк или столбцов без добавления дополнительных классов в HTML. Псевдоклассы играют ключевую роль в создании адаптивных и доступных интерфейсов, обеспечивая корректное отображение при навигации с клавиатуры и чтении с экрана.

Источники

1. Спецификация W3C «Selectors Level 3» (2011).
2. Спецификация W3C «Selectors Level 4» (рабочий черновик, 2018-2024).
3. Спецификация W3C «CSS Cascading and Inheritance Level 4».
4. Документация Mozilla Developer Network (MDN) — «Pseudo-classes».
5. Книга: «CSS: The Definitive Guide» (Eric A. Meyer, Estelle Weyl), 4-е издание, 2017.
6. Ресурс Can I use (caniuse.com) — данные о поддержке псевдоклассов браузерами.