: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 stimmt mit benutzerdefinierten Elementen überein, die den angegebenen benutzerdefinierten Zustand haben.
Syntax
:state(<custom identifier>) {
/* ... */
}
Parameter
Die :state()-Pseudoklasse nimmt als Argument einen benutzerdefinierten Bezeichner, der den Zustand des benutzerdefinierten Elements darstellt, das übereinstimmen soll.
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 mit der Maus darüber schwebt, oder ein Link kann sich im "Besucht"-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. Ebenso können autonome benutzerdefinierte Elemente (benutzerdefinierte Elemente, die nicht von integrierten Elementen abgeleitet sind) ihre Zustände zur Verfügung stellen, sodass Seiten, die die Elemente verwenden, sie mithilfe der CSS :state()-Pseudoklasse stylen können.
Die Zustände eines benutzerdefinierten Elements werden durch Zeichenfolgenwerte dargestellt. Diese Werte werden zu einem CustomStateSet-Objekt hinzugefügt oder entfernt, das dem Element zugeordnet ist. Die CSS :state()-Pseudoklasse stimmt mit einem Element überein, wenn der Bezeichner, der als Argument übergeben wird, im CustomStateSet des Elements vorhanden ist.
Die :state()-Pseudoklasse kann auch verwendet werden, um benutzerdefinierte Zustände innerhalb der Implementierung eines benutzerdefinierten Elements zu erfassen. Dies wird erreicht, indem :state() innerhalb der :host()-Pseudoklassenfunktion verwendet wird, die einen Zustand nur innerhalb des Shadow-DOM des aktuellen benutzerdefinierten Elements erfasst.
Darüber hinaus ermöglicht die ::part()-Pseudo-Element gefolgt von der :state()-Pseudoklasse die Übereinstimmung mit den Shadow-Parts eines benutzerdefinierten Elements, die sich in einem bestimmten Zustand befinden. (Shadow-Parts sind Teile eines benutzerdefinierten Elemente-Shadow-Trees, die explizit für Styling-Zwecke auf einer enthaltenden Seite freigegeben sind.)
Beispiele
Übereinstimmung eines benutzerdefinierten Zustands
Dieses CSS zeigt, wie die Grenze des autonomen benutzerdefinierten Elements <labeled-checkbox> auf red geändert werden kann, wenn es sich im "checked"-Zustand befindet.
labeled-checkbox {
border: dashed red;
}
labeled-checkbox:state(checked) {
border: solid;
}
Für ein Live-Beispiel dieses Codes in Aktion siehe das Übereinstimmen des benutzerdefinierten Zustands eines benutzerdefinierten Kontrollkästchenelements Beispiel auf der CustomStateSet-Seite.
Übereinstimmung 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 erfassen.
Das folgende CSS fügt ein graues [x] vor das Element ein, wenn es sich im "checked"-Zustand befindet.
:host(:state(checked))::before {
content: "[x]";
}
Für ein Live-Beispiel dieses Codes in Aktion siehe das Übereinstimmen des benutzerdefinierten Zustands eines benutzerdefinierten Kontrollkästchenelements Beispiel auf der CustomStateSet-Seite.
Übereinstimmung 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 erfassen.
Shadow-Parts werden unter Verwendung des part-Attributs definiert und benannt. Nehmen Sie zum Beispiel ein benutzerdefiniertes Element namens <question-box>, das ein <labeled-checkbox> benutzerdefiniertes Element als Shadow-Part namens checkbox verwendet:
shadowRoot.innerHTML = `<labeled-checkbox part='checkbox'>Yes</labeled-checkbox>`;
Das unten stehende CSS zeigt, wie das ::part()-Pseudo-Element verwendet werden kann, um gegen den 'checkbox' Shadow-Part zu erfassen. Es zeigt dann, wie das ::part()-Pseudo-Element gefolgt von der :state()-Pseudoklasse verwendet werden kann, um gegen denselben Teil zu erfassen, 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 dieses Codes in Aktion siehe das Übereinstimmen eines benutzerdefinierten Zustands in einem Shadow-Part eines benutzerdefinierten Elements Beispiel auf der CustomStateSet-Seite.
Spezifikationen
| Specification |
|---|
| HTML # selector-custom |
Browser-Kompatibilität
Loading…