Псевдокласс CSS `:state()`

:state() — это CSS-псевдокласс, который соответствует пользовательским элементам с указанным пользовательским состоянием.

Синтаксис

:state(<custom identifier>) {
  /* ... */
}

Параметры

Псевдокласс :state() принимает в качестве аргумента пользовательский идентификатор, обозначающий состояние пользовательского элемента, которому нужно сопоставить элемент.

Описание

Элементы могут переходить из одного состояния в другое в результате взаимодействия с пользователем и под влиянием других факторов. Например, элемент может находиться в состоянии «наведён курсор», когда пользователь наводит на него указатель, а ссылка может находиться в состоянии «посещена» после того, как пользователь нажал на неё. Элементы, предоставляемые браузерами, можно стилизовать в зависимости от этих состояний с помощью псевдоклассов CSS, таких как :hover и :visited. Аналогичным образом автономные пользовательские элементы (пользовательские элементы, производные не от встроенных элементов) могут предоставлять свои состояния, позволяя страницам, использующим эти элементы, стилизовать их с помощью псевдокласса CSS :state().

Состояния пользовательского элемента представлены строковыми значениями. Эти значения добавляются в объект CustomStateSet, связанный с элементом, или удаляются из него. Псевдокласс CSS :state() соответствует элементу, если переданный в качестве аргумента идентификатор присутствует в CustomStateSet этого элемента.

Псевдокласс :state() также можно использовать для сопоставления пользовательских состояний внутри реализации пользовательского элемента. Для этого нужно использовать :state() внутри функции-псевдокласса :host(), которая сопоставляет состояние только внутри теневого DOM текущего пользовательского элемента.

Кроме того, за псевдоэлементом ::part() можно указать псевдокласс :state(), чтобы сопоставить теневые части пользовательского элемента, находящиеся в определённом состоянии. (Теневые части — это части теневого дерева пользовательского элемента, которые явно предоставлены содержащей его странице для стилизации.)

Примеры

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

В этом примере CSS показано, как изменить границу автономного пользовательского элемента <labeled-checkbox> на red, когда он находится в состоянии «отмечен».

labeled-checkbox {
  border: dashed red;
}
labeled-checkbox:state(checked) {
  border: solid;
}

Рабочий пример этого кода см. в разделе Сопоставление пользовательского состояния пользовательского элемента флажка на странице CustomStateSet.

Сопоставление пользовательского состояния в теневом DOM пользовательского элемента

В этом примере показано, как псевдокласс :state() можно использовать внутри функции-псевдокласса :host() для сопоставления пользовательских состояний внутри реализации пользовательского элемента.

Следующий CSS добавляет серый [x] перед элементом, когда тот находится в состоянии «отмечен».

:host(:state(checked))::before {
  content: "[x]";
}

Рабочий пример этого кода см. в разделе Сопоставление пользовательского состояния пользовательского элемента флажка на странице CustomStateSet.

Сопоставление пользовательского состояния в теневой части

В этом примере показано, как псевдокласс :state() можно использовать для выбора теневых частей пользовательского элемента.

Теневые части определяются и именуются с помощью атрибута part. Например, рассмотрим пользовательский элемент с именем <question-box>, который использует пользовательский элемент <labeled-checkbox> в качестве теневой части с именем checkbox:

shadowRoot.innerHTML = `<labeled-checkbox part='checkbox'>Yes</labeled-checkbox>`;

В приведённом ниже CSS показано, как псевдоэлемент ::part() можно использовать для сопоставления с теневой частью 'checkbox'. Затем показано, как псевдоэлемент ::part() с последующим псевдоклассом :state() можно использовать для сопоставления с той же частью, когда она находится в состоянии checked.

question-box::part(checkbox) {
  color: red;
}

question-box::part(checkbox):state(checked) {
  color: green;
  outline: dashed 1px green;
}

Рабочий пример этого кода см. в разделе Сопоставление пользовательского состояния в теневой части пользовательского элемента на странице CustomStateSet.

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

Совместимость с браузерами

См. также

• CustomStateSet
• Псевдоклассы
• Изучите: псевдоклассы и псевдоэлементы
• Пользовательские состояния и CSS-селекторы псевдоклассов пользовательских состояний в статье Использование пользовательских элементов