:state() CSS-Pseudoklasse
Baseline 2024
Neu verfügbar
Seit Mai 2024 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Die :state() CSS-Pseudoklasse entspricht benutzerdefinierten Elementen, 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 überwachenden benutzerdefinierten Elements darstellt.
Beschreibung
Elemente können aufgrund von Benutzerinteraktionen und anderen Faktoren zwischen Zuständen wechseln.
Zum Beispiel kann sich ein Element im "hover"-Zustand befinden, wenn ein Benutzer darüber fährt, oder ein Link kann im "visited"-Zustand sein, nachdem ein Benutzer darauf geklickt hat.
Von Browsern bereitgestellte Elemente können basierend auf diesen Zuständen mithilfe von CSS-Pseudoklassen wie :hover und :visited gestaltet werden.
Ebenso können autonome benutzerdefinierte Elemente (benutzerdefinierte Elemente, die nicht von eingebauten Elementen abgeleitet sind) ihre Zustände offenlegen, wodurch Seiten, die die Elemente verwenden, diese mithilfe der CSS-:state()-Pseudoklasse gestalten können.
Die Zustände eines benutzerdefinierten Elements werden durch Zeichenfolgenwerte dargestellt.
Diese Werte werden zu einem CustomStateSet-Objekt hinzugefügt oder davon entfernt, das mit dem Element verknüpft ist.
Die CSS-Pseudoklasse :state() entspricht einem 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 benutzerdefinierten Elements zu überwachen.
Dies wird erreicht, indem :state() innerhalb der :host()-Pseudoklassenfunktion verwendet wird, welche einen Zustand nur innerhalb des Shadow-DOM des aktuellen benutzerdefinierten Elements überwacht.
Zusätzlich ermöglicht das ::part()-Pseudo-Element zusammen mit der :state()-Pseudoklasse das Überwachen der Shadow-Parts eines benutzerdefinierten Elements, die sich in einem bestimmten Zustand befinden. (Shadow-Parts sind Teile eines benutzerdefinierten Elements im Shadow-Baum, die explizit zur Gestaltung auf einer umgebenden Seite freigelegt werden.)
Beispiele
Überwachen eines benutzerdefinierten Zustands
Dieses CSS zeigt, wie der Rand des autonomen benutzerdefinierten 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 dieser funktionierenden Code, siehe das Matching the custom state of a custom checkbox element-Beispiel auf der CustomStateSet-Seite.
Überwachen eines benutzerdefinierten Zustands im Shadow-DOM eines benutzerdefinierten Elements
Dieses Beispiel zeigt, wie die :state()-Pseudoklasse innerhalb der :host()-Pseudoklassenfunktion verwendet werden kann, um benutzerdefinierte Zustände innerhalb der Implementierung eines benutzerdefinierten Elements zu überwachen.
Das folgende CSS fügt dem Element ein graues [x] hinzu, wenn es sich im "checked"-Zustand befindet.
:host(:state(checked))::before {
content: "[x]";
}
Für ein Live-Beispiel dieses funktionierenden Codes, siehe das Matching the custom state of a custom checkbox element-Beispiel auf der CustomStateSet-Seite.
Überwachen eines benutzerdefinierten Zustands in einem Shadow-Part
Dieses Beispiel zeigt, wie die :state()-Pseudoklasse verwendet werden kann, um die Shadow-Parts eines benutzerdefinierten Elements zu überwachen.
Shadow-Parts werden mithilfe des part-Attributs definiert und benannt.
Beispielsweise betrachten Sie ein benutzerdefiniertes Element namens <question-box>, das ein benutzerdefiniertes Element <labeled-checkbox> als ein Shadow-Part namens checkbox verwendet:
shadowRoot.innerHTML = `<labeled-checkbox part='checkbox'>Yes</labeled-checkbox>`;
Das folgende CSS zeigt, wie das ::part()-Pseudoelement verwendet werden kann, um das 'checkbox'-Shadow-Part zu überwachen.
Es zeigt auch, wie das ::part()-Pseudoelement, gefolgt von der :state()-Pseudoklasse, verwendet werden kann, um das gleiche Part zu überwachen, wenn es im checked-Zustand ist.
question-box::part(checkbox) {
color: red;
}
question-box::part(checkbox):state(checked) {
color: green;
outline: dashed 1px green;
}
Für ein Live-Beispiel dieses funktionierenden Codes, siehe das Matching a custom state in a shadow part of a custom element-Beispiel auf der CustomStateSet-Seite.
Spezifikationen
| Spezifikation |
|---|
| HTML # selector-custom |