:state()
Псевдоклас CSS :state()
дає збіг з кастомними елементами, які мають вказаний кастомний стан.
Синтаксис
Псевдоклас :state()
приймає як аргумент кастомний ідентифікатор, що представляє стан кастомного елемента для збігу.
:state(<кастомний ідентифікатор>) {
/* ... */
}
Опис
Елементи можуть переходити між станами у зв'язку з діями користувача та іншими чинниками.
Наприклад, елемент може перебувати в стані "hover", коли користувач навів на нього курсор, або посилання може перебувати в стані "visited" після клацання користувачем.
Елементи, що пропонуються браузерами, можна стилізувати на основі цих станів за допомогою псевдокласів CSS, як от :hover
і :visited
.
Подібно до цього, автономні кастомні елементи (кастомні елементи, що не походять від вбудованих елементів) можуть розкривати власні стани, що дає сторінкам, які використовують ці елементи, можливість стилізувати їх за допомогою псевдокласу CSS :state()
.
Стани кастомного елемента представляються у вигляді рядкових значень.
Ці значення додаються та вилучаються з об'єкта CustomStateSet
, що пов'язаний з відповідним елементом.
Псевдоклас CSS :state()
дає збіг з елементом тоді, коли ідентифікатор, переданий як аргумент, присутній у CustomStateSet
цього елемента.
Також псевдокласом :state()
можна користуватися, щоб шукати збіг з кастомними станами всередині реалізації кастомного елемента.
Це досягається шляхом застосування :state()
всередині псевдокласу-функції :host()
, яка дає збіг зі станом лише всередині тіньового DOM поточного кастомного елемента.
Крім цього, псевдоелемент ::part()
, після якого стоїть псевдоклас :state()
, дає змогу шукати збіг у тіньових частинах кастомного елемента, які перебувають у певному стані. (Тіньові частини – це частини тіньового дерева кастомного елемента, які явно відкриті для сторінки, що їх вміщає, для потреб стилізації.)
Приклади
Збіг з кастомним станом
Цей CSS демонструє, як зробити межу автономного кастомного елемента <labeled-checkbox>
red
(червоною), коли він перебуває в стані "checked".
labeled-checkbox {
border: dashed red;
}
labeled-checkbox:state(checked) {
border: solid;
}
Живий приклад цього коду в дії шукайте в прикладі Збігу з кастомним станом кастомного елемента поля з галочкою на сторінці CustomStateSet
.
Збіг з кастомним станом у тіньовому DOM кастомного елемента
Цей приклад демонструє, як можна використати псевдоклас :state()
всередині псевдокласу-функції :host()
, щоб шукати збіг з кастомними станами всередині реалізації кастомного елемента.
Наступний CSS вставляє сірий [x]
перед елементом, коли цей елемент перебуває в стані "checked".
:host(:state(checked))::before {
content: "[x]";
}
Живий приклад цього коду в дії шукайте в прикладі Збігу з кастомним станом кастомного елемента поля з галочкою на сторінці CustomStateSet
.
Збіг з кастомним станом у тіньовій частині
Цей приклад показує, як псевдоклас :state()
можна використати для націлення на тіньові частини кастомного елемента.
Тіньові частини визначаються та називаються за допомогою атрибута part
.
Наприклад, нехай буде кастомний елемент з ім'ям <question-box>
, який використовує кастомний елемент <labeled-checkbox>
як тіньову частину з іменем checkbox
:
shadowRoot.innerHTML = `<labeled-checkbox part='checkbox'>Так</labeled-checkbox>`;
CSS нижче показує, як псевдоелемент ::part()
можна використати для пошуку збігу з тіньовою частиною 'checkbox'
.
Далі він показує, як можна скористатися псевдоелементом ::part()
, після якого стоїть псевдоклас :state()
, для пошуку збігу з цією ж частиною, коли вона перебуває в стані "checked".
question-box::part(checkbox) {
color: red;
}
question-box::part(checkbox):state(checked) {
color: green;
}
Живий приклад цього коду в дії шукайте в прикладі Збігу з кастомним станом кастомного елемента поля з галочкою на сторінці CustomStateSet
.