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

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

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

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

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

Базовые псевдоклассы

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

:defined

Соответствует любому определённому элементу.

:heading

Соответствует любому заголовочному элементу (<h1>–<h6>).

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

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

:open

Соответствует элементу, который может быть открытым или закрытым и в данный момент открыт.

:popover-open

Соответствует всплывающему элементу, который в данный момент отображается.

:modal

Соответствует элементу, находящемуся в состоянии, при котором он блокирует любое взаимодействие с расположенными за его пределами элементами, пока это состояние не будет снято.

:fullscreen

Соответствует элементу, отображаемому в полноэкранном режиме.

:picture-in-picture

Соответствует элементу, отображаемому в режиме «картинка в картинке».

:xr-overlay

Соответствует элементу наложения DOM во время иммерсивного сеанса AR или VR.

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

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

:enabled

Представляет элемент пользовательского интерфейса, находящийся в активном состоянии.

:disabled

Представляет элемент пользовательского интерфейса, находящийся в отключённом состоянии.

:read-only

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

:read-write

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

:placeholder-shown

Соответствует элементу ввода, в котором отображается текст-подсказка. Например, он соответствует атрибуту placeholder в элементах <input> и <textarea>.

:autofill

Соответствует элементу <input>, автоматически заполненному браузером.

: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 документа.

:scope

Представляет элементы, служащие точкой отсчёта для сопоставления с селекторами.

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

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

:playing

Представляет воспроизводимый элемент, который находится в состоянии воспроизведения.

:paused

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

:seeking

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

:buffering

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

:stalled

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

:muted

Представляет звуковоспроизводящий элемент без звука.

:volume-locked

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

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

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

:current

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

:past

Представляет элемент, который целиком расположен перед элементом :current.

:future

Представляет элемент, который целиком расположен после элемента :current.

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

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

:root

Представляет элемент, являющийся корнем документа. В HTML обычно это элемент <html>.

:empty

Представляет элемент, у которого нет дочерних элементов, кроме символов пробельных символов.

:nth-child()

Использует нотацию An+B для выбора элементов из списка соседних элементов.

:nth-last-child()

Использует нотацию An+B для выбора элементов из списка соседних элементов, начиная с конца списка.

:first-child

Соответствует элементу, который является первым среди своих соседей.

:last-child

Соответствует элементу, который является последним среди своих соседей.

:only-child

Соответствует элементу, у которого нет соседей. Например, элементу списка, если в этом списке нет других элементов.

:heading()

Использует нотацию An+B для выбора заголовочных элементов (<h1>–<h6>).

:nth-of-type()

Использует нотацию An+B для выбора из списка соседних элементов элементов, соответствующих определённому типу.

:nth-last-of-type()

Использует нотацию An+B для выбора из списка соседних элементов элементов, соответствующих определённому типу, начиная с конца списка.

:first-of-type

Соответствует элементу, который является первым среди своих соседей и также соответствует определённому селектору типа.

:last-of-type

Соответствует элементу, который является последним среди своих соседей и также соответствует определённому селектору типа.

:only-of-type

Соответствует элементу, у которого нет соседей, соответствующих выбранному селектору типа.

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

Эти псевдоклассы связаны с теневым DOM.

:host

Соответствует хосту теневого дерева.

:host

Соответствует элементу, который соответствует :host и одному из селекторов в указанном списке.

:host-context()

Выбирает элементы вне теневого дерева в контексте хоста теневого дерева.

:has-slotted

Соответствует элементам slot, которым назначено содержимое.

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

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

:hover

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

:active

Соответствует элементу, активируемому пользователем. Например, когда пользователь щёлкает по элементу.

:focus

Соответствует элементу, находящемуся в фокусе.

:focus-visible

Соответствует элементу, находящемуся в фокусе, если пользовательский агент определяет, что фокус элемента должен быть видимым.

:focus-within

Соответствует элементу, к которому применяется :focus, а также любому элементу, у которого есть потомок, к которому применяется :focus.

:target-current

Соответствует псевдоэлементу ::scroll-marker группы scroll-marker-group, к которой в данный момент выполнена прокрутка, то есть активному маркеру прокрутки.

Граница сопоставления предков верхнего слоя

При задании стилей с помощью селектора псевдокласса :hover, :active или :focus-within селектор соответствует вложенному набору элементов вверх по дереву DOM. Если иерархия включает элемент верхнего слоя (например, всплывающее окно или средство выбора настраиваемого элемента <select>), сопоставление прекращается на этом элементе верхнего слоя.

Например, в следующем коде показаны настраиваемый элемент <select> и всплывающее окно. Мы задали для каждого элемента страницы толстую синюю пунктирную border при наведении указателя.

<main>
  <select>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>

  <div>
    <button popovertarget="mypopover">Toggle popover</button>
    <section id="mypopover" popover>
      <p>I am a popover</p>
      <button>I am a popover button</button>
    </section>
  </div>
</main>

* {
  padding: 5px;
}

select,
::picker(select) {
  appearance: base-select;
}

:hover {
  border: 5px dashed blue;
}

Обратите внимание: при наведении указателя на элемент <select> или кнопку переключения всплывающего окна границу получают все предки этих элементов. Однако после открытия средства выбора или всплывающего окна наведение указателя на один из их потомков применяет границу только до самого элемента верхнего слоя (средства выбора или всплывающего окна), то есть на этом элементе сопоставление прекращается.

Такое поведение не позволяет сопоставлению псевдокласса выходить за пределы компонента верхнего слоя и затрагивать окружающую страницу, что иначе могло бы привести к нарушению отображения пользовательского интерфейса.

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

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

:is()

Псевдокласс «соответствует любому» соответствует любому элементу, подходящему под один из селекторов указанного списка. Ошибочные селекторы в списке игнорируются.

:not()

Псевдокласс отрицания, или «не соответствует ни одному», представляет любой элемент, который не представлен его аргументом.

:where()

Псевдокласс корректировки специфичности соответствует любому элементу, подходящему под один из селекторов указанного списка, не добавляя веса специфичности. Ошибочные селекторы в списке игнорируются.

:has()

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

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

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

:state()

Соответствует пользовательским элементам, имеющим указанное пользовательское состояние.

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

Эти псевдоклассы связаны со страницами печатного документа и используются с правилом @page.

:left

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

:right

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

:first

Представляет первую страницу печатного документа.

:blank

Представляет пустую страницу печатного документа.

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

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

:active-view-transition

Соответствует корневому элементу документа, пока выполняется (то есть является активным) переход между представлениями, и перестаёт соответствовать после завершения перехода.

:active-view-transition-type()

Соответствует корневому элементу документа, пока выполняется (то есть является активным) указанный переход между представлениями, и перестаёт соответствовать после завершения перехода.

Синтаксис

selector:pseudo-class {
  property: value;
}

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

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

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

A

• :active
• :active-view-transition
• :active-view-transition-type()
• :any-link
• :autofill

B

• :blank (поле ввода) Экспериментальная
• :blank (страница)
• :buffering

C

• :checked
• :current Экспериментальная

D

• :default
• :defined
• :dir()
• :disabled

E

• :empty
• :enabled

F

• :first
• :first-child
• :first-of-type
• :focus
• :focus-visible
• :focus-within
• :fullscreen
• :future

H

• :has-slotted
• :has()
• :heading
• :heading()
• :host
• :host
• :host-context()
• :hover

I

• :in-range
• :indeterminate
• :interest-source
• :interest-target
• :invalid
• :is()

L

• :lang()
• :last-child
• :last-of-type
• :left
• :link
• :local-link Экспериментальная

M

• :modal
• :muted

N

• :not()
• :nth-child()
• :nth-last-child()
• :nth-last-of-type()
• :nth-of-type()

O

• :only-child
• :only-of-type
• :open
• :optional
• :out-of-range

P

• :past
• :paused
• :picture-in-picture
• :placeholder-shown
• :playing
• :popover-open

R

• :read-only
• :read-write
• :required
• :right
• :root

S

• :scope
• :seeking
• :stalled
• :state()

T

• :target
• :target-after
• :target-current
• :target-before

U

• :user-invalid
• :user-valid

V

• :valid
• :visited
• :volume-locked

W

• :where()

X

• :xr-overlay Экспериментальная

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

К нестандартным псевдоклассам с префиксами поставщиков относятся:

префикс -moz-

• :-moz-broken
• :-moz-drag-over
• :-moz-first-node
• :-moz-handler-blocked
• :-moz-handler-crashed
• :-moz-handler-disabled
• :-moz-last-node
• :-moz-loading
• :-moz-locale-dir(ltr)
• :-moz-locale-dir(rtl)
• :-moz-only-whitespace
• :-moz-submit-invalid
• :-moz-suppressed
• :-moz-user-disabled
• :-moz-window-inactive

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

См. также

• Псевдоэлементы
• Модуль селекторов CSS