:state()

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

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

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

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

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

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

Этот CSS показывает, как изменить границу автономного пользовательского элемента <labeled-checkbox> на red при нахождении его в состоянии "выбрано".

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

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

Этот пример показывает, как псевдокласс :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;
}

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

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