:state()
Baseline
2024
Newly available
Since May 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die :state() CSS Pseudoklasse matcht Custom Elements, die den angegebenen benutzerdefinierten Zustand haben.
Syntax
:state(<custom identifier>) {
/* ... */
}
Parameter
Die :state() Pseudoklasse nimmt als Argument einen benutzerdefinierten Bezeichner, der den Zustand des zu matchenden Custom Elements darstellt.
Beschreibung
Elemente können aufgrund von Benutzerinteraktion und anderen Faktoren zwischen Zuständen wechseln.
Ein Element kann sich beispielsweise im "hover"-Zustand befinden, wenn ein Benutzer über das Element fährt, oder ein Link kann sich im "besuchten" Zustand befinden, nachdem ein Benutzer darauf geklickt hat.
Von Browsern bereitgestellte Elemente können basierend auf diesen Zuständen mit CSS-Pseudoklassen wie :hover und :visited gestylt werden.
Ähnlich können autonome Custom Elements (Custom Elements, die nicht von eingebauten Elementen abgeleitet sind) ihre Zustände offenlegen, sodass Seiten, die die Elemente verwenden, diese mit der CSS :state() Pseudoklasse stylen können.
Die Zustände eines Custom Elements werden durch Zeichenfolgenwerte dargestellt.
Diese Werte werden einem CustomStateSet-Objekt, das dem Element zugeordnet ist, hinzugefügt oder daraus entfernt.
Die CSS :state() Pseudoklasse matcht ein Element, wenn der als Argument übergebene Bezeichner im CustomStateSet des Elements vorhanden ist.
Die :state() Pseudoklasse kann auch verwendet werden, um benutzerdefinierte Zustände innerhalb der Implementierung eines Custom Elements zu matchen.
Dies wird erreicht, indem :state() innerhalb der :host() Pseudoklassenfunktion verwendet wird, die einen Zustand nur innerhalb des Shadow DOM des aktuellen Custom Elements matcht.
Zusätzlich erlaubt das ::part() Pseudoelement, gefolgt von der :state() Pseudoklasse, das Matching von Shadow Parts eines Custom Elements, die sich in einem bestimmten Zustand befinden. (Shadow Parts sind Teile des Shadow Tree eines Custom Elements, die explizit für das Stylen auf einer enthaltenen Seite freigelegt sind.)
Beispiele
Matchen eines benutzerdefinierten Zustands
Dieses CSS zeigt, wie die Umrandung des autonomen Custom Elements <labeled-checkbox> auf rot geändert wird, wenn es sich im "checked"-Zustand befindet.
labeled-checkbox {
border: dashed red;
}
labeled-checkbox:state(checked) {
border: solid;
}
Für ein Live-Beispiel, wie dieser Code in Aktion funktioniert, siehe das Matching the custom state of a custom checkbox element-Beispiel auf der CustomStateSet-Seite.
Matchen eines benutzerdefinierten Zustands im Shadow DOM eines Custom Elements
Dieses Beispiel zeigt, wie die :state() Pseudoklasse innerhalb der :host() Pseudoklassenfunktion verwendet werden kann, um benutzerdefinierte Zustände innerhalb der Implementierung eines Custom Elements zu matchen.
Das folgende CSS fügt ein graues [x] vor dem Element ein, wenn es sich im "checked"-Zustand befindet.
:host(:state(checked))::before {
content: "[x]";
}
Für ein Live-Beispiel, wie dieser Code in Aktion funktioniert, siehe das Matching the custom state of a custom checkbox element-Beispiel auf der CustomStateSet-Seite.
Matchen eines benutzerdefinierten Zustands in einem Shadow Part
Dieses Beispiel zeigt, wie die :state() Pseudoklasse verwendet werden kann, um die Shadow Parts eines Custom Elements zu targetieren.
Shadow Parts werden mit dem part-Attribut definiert und benannt.
Zum Beispiel betrachten Sie ein Custom Element namens <question-box>, das ein <labeled-checkbox> Custom Element als Shadow Part namens checkbox verwendet:
shadowRoot.innerHTML = `<labeled-checkbox part='checkbox'>Yes</labeled-checkbox>`;
Das untenstehende CSS zeigt, wie das ::part() Pseudoelement verwendet werden kann, um gegen den 'checkbox' Shadow Part zu matchen.
Es zeigt dann, wie das ::part() Pseudoelement gefolgt von der :state() Pseudoklasse verwendet werden kann, um gegen denselben Part zu matchen, wenn er sich im checked-Zustand befindet.
question-box::part(checkbox) {
color: red;
}
question-box::part(checkbox):state(checked) {
color: green;
outline: dashed 1px green;
}
Für ein Live-Beispiel, wie dieser Code in Aktion funktioniert, siehe das Matching a custom state in a shadow part of a custom element-Beispiel auf der CustomStateSet-Seite.
Spezifikationen
| Specification |
|---|
| HTML # selector-custom |