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

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

/* Any button over which the user's pointer is hovering */
button:hover {
  color: blue;
}

Псевдокласс состоит из двоеточия (:) и имени псевдокласса (например, :hover). Функциональный псевдокласс также содержит пару скобок для определения аргументов (например, :dir()). Элемент, к которому прикреплен псевдокласс, определяется как якорный элемент (например, button, в случае button:hover).

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

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

Псевдоклассы состояния отображения элемента

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

:fullscreen: Соответствует элементу, который в настоящее время находится в полноэкранном режиме.
:modal: Соответствует элементу, который находится в состоянии, исключающем любое взаимодействие с элементами за его пределами, до тех пор, пока взаимодействие не будет отклонено.
:picture-in-picture: Соответствует элементу, который в настоящее время находится в режиме "картинка в картинке".

Псевдоклассы элементов ввода

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

:autofill: Соответствует, когда браузер автоматически заполнил <input>.
:enabled: Представляет элемент пользовательского интерфейса, находящийся в состоянии включения.
:disabled: Представляет элемент пользовательского интерфейса, находящийся в состоянии выключения.
:read-only: Представляет любой элемент, который пользователь не может изменить.
:read-write: Представляет любой элемент, который можно редактировать пользователем.
:placeholder-shown: Соответствует элементу ввода, отображающему текст метки. Например, он будет соответствовать атрибуту placeholder в элементах <input> и <textarea>.
:default: Соответствует одному или нескольким элементам пользовательского интерфейса, которые являются стандартными среди набора элементов.
:checked: Соответствует случаю, когда такие элементы, как флажки и радиокнопки, включены.
:indeterminate: Соответствует элементам пользовательского интерфейса, когда они находятся в неопределённом состоянии.
:blank: Соответствует элементу ввода, который пуст, содержит пустую строку или другой нулевой ввод.
:valid: Соответствует элементу с корректным содержимым. Например, элементу ввода типа 'email', который содержит корректный адрес электронной почты, или пустое значение, если поле не обязательно.
:invalid: Соответствует элементу с некорректным содержимым. Например, элементу ввода типа 'email' с введённым именем.
:in-range: Применяется к элементам с ограничениями диапазона. Например, к ползунку, когда выбранное значение находится в допустимом диапазоне.
:out-of-range: Применяется к элементам с ограничениями диапазона. Например, к ползунку, когда выбранное значение находится вне допустимого диапазона.
:required: Соответствует, когда элемент формы обязателен.
:optional: Соответствует, когда элемент формы необязателен.
:user-valid: Представляет элемент с правильным вводом, но только когда пользователь с ним взаимодействовал.
:user-invalid: Представляет элемент с неправильным вводом, но только когда пользователь с ним взаимодействовал.

Лингвистические псевдоклассы

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

:dir(): Псевдокласс направленности выбирает элемент на основе его направленности, определяемой языком документа.
:lang(): Выбирает элемент на основе языка его содержимого.

Псевдоклассы местоположения

Эти псевдоклассы относятся к ссылкам и к целевым элементам в текущем документе.

:any-link: Соответствует элементу, если элемент соответствует либо :link, либо :visited.
:link: Соответствует ссылкам, которые ещё не посещались.
:visited: Соответствует ссылкам, которые были посещены.
:local-link: Соответствует ссылкам, абсолютный URL которых совпадает с целевым URL. Например, якорям внутри одной страницы.
:target: Соответствует элементу, являющемуся целью URL документа.
:target-within: Соответствует элементам, являющимся целью URL документа, но также элементам, имеющим потомка, являющегося целью URL документа.
:scope: Представляет элементы, которые являются точкой отсчёта для селекторов для сопоставления.

Псевдоклассы состояния ресурса

Эти псевдоклассы применяются к медиа, которые могут находиться в состоянии, которое описывается как воспроизведение, например, видео.

:playing: Представляет элемент медиа, способный воспроизводиться, когда этот элемент воспроизводится.
:paused: Представляет элемент медиа, способный воспроизводиться, когда этот элемент приостановлен.

Псевдоклассы временной размерности

Эти псевдоклассы применяются при просмотре чего-либо, имеющего временные характеристики, например, субтитров WebVTT.

:current: Представляет элемент или предка элемента, который отображается.
:past: Представляет элемент, который полностью предшествует элементу :current.
:future: Представляет элемент, который полностью следует за элементом :current.

END_OF_DOCUMENT_MARKER

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

Эти псевдоклассы относятся к расположению элемента в дереве документа.

:root: Представляет элемент, являющийся корнем документа. В HTML это обычно элемент <html>.
:empty: Представляет элемент без дочерних элементов, кроме символов пробела.
:nth-child: Использует запись An+B для выбора элементов из списка соседних элементов.
:nth-last-child: Использует запись An+B для выбора элементов из списка соседних элементов, считая от конца списка.
:first-child: Соответствует элементу, являющемуся первым среди его соседей.
:last-child: Соответствует элементу, являющемуся последним среди его соседей.
:only-child: Соответствует элементу, у которого нет соседей. Например, элемент списка, у которого нет других элементов списка в этом списке.
:nth-of-type: Использует запись An+B для выбора элементов из списка соседних элементов, которые соответствуют определенному типу из списка соседних элементов.
:nth-last-of-type: Использует запись An+B для выбора элементов из списка соседних элементов, которые соответствуют определенному типу из списка соседних элементов, считая от конца списка.
:first-of-type: Соответствует элементу, являющемуся первым среди его соседей, и также соответствующему определённому селектору типа.
:last-of-type: Соответствует элементу, являющемуся последним среди его соседей, и также соответствующему определённому селектору типа.
:only-of-type: Соответствует элементу, у которого нет соседей заданного типа селектора.

Псевдоклассы действий пользователя

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

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

Функциональные псевдоклассы

Эти псевдоклассы принимают список селекторов или список селекторов с допусками в качестве параметра.

:is(): Псевдокласс "соответствует любому" соответствует любому элементу, который соответствует любому из селекторов в предоставленном списке. Список допускает ошибки.
:not(): Псевдокласс "отрицание" или "не соответствует" представляет любой элемент, который не представлен своим аргументом.
:where(): Псевдокласс "коррекции специфичности" соответствует любому элементу, который соответствует любому из селекторов в предоставленном списке, не добавляя веса специфичности. Список допускает ошибки.
:has(): Псевдокласс "отношения" представляет элемент, если любой из относительных селекторов соответствует при закреплении к присоединённому элементу.

Синтаксис

selector:pseudo-class {
  property: value;
}

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

Алфавитный указатель

Определённые набором спецификаций CSS псевдоклассы включают следующие:

:blank Экспериментальный

:has() Экспериментальный
:host
:host()
:host-context() Экспериментальный
:hover

:modal

:target
:target-within Экспериментальный

:user-invalid

:where()

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

Спецификация
Стандарт HTML # псевдоклассы
Селекторы уровень 4
CSS Модуль базового пользовательского интерфейса уровень 4

См. также

Псевдоэлементы

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes