Референсное руководство по псевдоклассам CSS

Pseudo-классы CSS

Pseudo-классы используются для определения специальных состояний элементов.

Например, это можно использовать для:

  • Установите стиль при наведении мыши на элемент.
  • Установите различные стили для посещенных и непосещенных ссылок.
  • Установите стиль при получении элементом фокуса.
  • Установите стиль для элементов формы, которые являются действительными/недействительными/обязательными/необязательными.

В таблице ниже показаны различные pseudo-классы CSS:

Пseudo-классы Пример Описание примера
:active a:active Выберите активную ссылку
:any-link a:anylink Выберите все элементы <a> или <area> с атрибутом href.
:auto-fill input:autofill Выберите все элементы <input>, автоматически заполненные браузером.
:checked option:checked Совпадение всех выбранных элементов <input> или <option>.
:default input:default Выберите элемент по умолчанию в группе связанных элементов формы.
:defined :defined Выберите все определенные элементы (стандартные или пользовательские элементы).
:dir() :dir(rtl) Выберите элементы с указанным направлением текста.
:disabled option:disabled Выберите все отключенные элементы, часто используемые для элементов форм.
:empty div:empty Выберите все элементы без подэлементов (включая текстовые узлы).
:enabled input:enabled Выберите все элементы, которые включены, часто используется для элементов форм.
:first @page :first Представляет первую страницу документа для печати (вместе с правилом @page).
:first-child p:first-child Выберите элемент, который является первым ребенком его родительского элемента (в группе братских элементов).
:first-of-type li:first-of-type Выберите первый элемент определенного типа в группе兄弟ских элементов.
:focus select:focus Выберите элемент, который получил фокус, часто используется для элементов форм.
:focus-visible button:focus-visible Выберите элемент, который получил фокус ( применимо только к фокусным стилям, применяемым через клавиатуру, а не через мышь).
:focus-within form:focus-within Соответствует элементам или любым их потомкам, которые получили фокус.
:fullscreen :fullscreen Выберите элемент, который в настоящее время находится в режиме полноэкранного просмотра.
:has() h2:has(+p) Выберите элемент <h2>, который следует сразу за элементом <p>, и примените стиль к <h2>.
:hover a:hover Выберите элемент, на котором находится курсор мыши.
:in-range input:in-range Выберите элемент <input>, значение которого находится в указанном диапазоне.
:indeterminate input:indeterminate Выберите элементы форм, находящиеся в неопределенном состоянии.
:invalid input:invalid Выберите无效ные элементы форм.
:is() :is(ul, ol) Выберите все элементы <ul> и <ol>.
:lang() p:lang(it) Выберите элемент <p> с атрибутом lang, равным "it" (итальянский).
:last-child li:last-child Выберите элемент <li>, который является последним ребенком его родительского элемента.
:last-of-type p:last-of-type Выберите элемент <p>, который является последним ребенком его родительского элемента.
:left @page :left Представляет все левые страницы всех документов для печати (вместе с правилом @page).
:link a:link Выберите все неvisited ссылки.
:modal :modal Выберите элементы, находящиеся в состоянии модального окна.
:not() :not(p) Выберите все элементы, которые не являются элементами <p>.
:nth-child() p:nth-child(2) Выберите элемент <p>, который является вторым ребенком его родительского элемента.
:nth-last-child() p:nth-last-child(2) Выберите элемент <p>, который является вторым по счету от конца ребенком в родительском элементе.
:nth-last-of-type() p:nth-last-of-type(2) Выберите элемент <p>, который является вторым по счету от конца <p> в родительском элементе.
:nth-of-type() p:nth-of-type(2) Выберите элемент <p>, который является вторым <p> в родительском элементе.
:only-child p:only-child Выберите элемент <p>, который является единственным ребенком в родительском элементе.
:only-of-type p:only-of-type Выберите элемент <p>, который является единственным <p> в родительском элементе.
:optional textarea:optional Выберите элементы <input>, <select> или <textarea>, у которых нет атрибута required.
:out-of-range input:out-of-range Выберите элементы <input>, значения которых выходят за пределы указанного диапазона.
:placeholder-shown input:placeholder-shown Выберите элементы <input> или <textarea>, которые отображают текст占емника.
:popover-open :popover-open Выберите элементы, которые находятся в состоянии отображения всплывающего окна.
:read-only input:read-only Выберите элементы ввода с атрибутом readonly.
:read-write input:read-write Выберите редактируемые элементы ввода.
:required input:required Выберите элементы ввода с атрибутом required.
:right @page :right Представляет все правые страницы документа для печати (вместе с правилом @page).
:root :root Выберите корневой элемент документа.
:scope :scope Выберите элемент, который является точкой или диапазоном для селектора.
:state() :state() Выберите пользовательский элемент с указанным пользовательским состоянием.
:target :target Выберите текущий активный целевой элемент.
:user-invalid :user-invalid Выберите элементы формы с недействительными значениями (после взаимодействия пользователя с ними).
:user-valid :user-valid Выберите элементы формы с действительными значениями (после взаимодействия пользователя с ними).
:valid input:valid Выберите все элементы ввода с действительными значениями.
:visited a:visited Выберите все посещенные ссылки.
:where() :where(ol, ul) Выберите все элементы <ul> и <ol>.