:state()
Baseline 2024Newly 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()
-Pseudo-Klasse in CSS vergleicht Custom-Elemente, die sich in einem bestimmten benutzerdefinierten Zustand befinden.
Syntax
Die Pseudo-Klasse :state()
nimmt als Argument einen benutzerdefinierten Bezeichner, der den Zustand des Custom-Elements repräsentiert, das verglichen werden soll.
:state(<custom identifier>) {
/* ... */
}
Beschreibung
Elemente können aufgrund von Benutzerinteraktionen und anderen Faktoren zwischen Zuständen wechseln.
Beispielsweise kann sich ein Element im "Hover"-Zustand befinden, wenn ein Benutzer mit der Maus darüberfährt, oder ein Link kann sich im "Visited"-Zustand befinden, nachdem ein Benutzer darauf geklickt hat.
Von Browsern bereitgestellte Elemente können mit CSS-Pseudo-Klassen wie :hover
und :visited
basierend auf diesen Zuständen gestaltet werden.
Ähnlich können autonome Custom-Elemente (Custom-Elemente, die nicht von eingebauten Elementen abgeleitet sind) ihre Zustände offenlegen, sodass Seiten, die diese Elemente verwenden, sie mithilfe der CSS-Pseudo-Klasse :state()
gestalten können.
Die Zustände eines Custom-Elements werden durch Zeichenketten dargestellt.
Diese Werte werden hinzugefügt oder entfernt aus einem CustomStateSet
-Objekt, das mit dem Element verknüpft ist.
Die CSS-Pseudo-Klasse :state()
vergleicht ein Element, wenn der angegebene Bezeichner, der als Argument übergeben wird, im CustomStateSet
des Elements vorhanden ist.
Die Pseudo-Klasse :state()
kann auch verwendet werden, um benutzerdefinierte Zustände innerhalb der Implementierung eines Custom-Elements zu vergleichen.
Dies wird erreicht, indem :state()
innerhalb der :host()
-Pseudo-Klasse verwendet wird, die einen Zustand nur innerhalb des Shadow-DOM des aktuellen Custom-Elements vergleicht.
Zusätzlich ermöglicht die ::part()
-Pseudo-Element in Kombination mit der :state()
-Pseudo-Klasse den Vergleich von Shadow-Parts eines Custom-Elements, die sich in einem bestimmten Zustand befinden. (Shadow-Parts sind Teile des Shadow-DOM eines Custom-Elements, die explizit für Styling-Zwecke einer Seite zugänglich gemacht werden.)
Beispiele
Vergleich eines benutzerdefinierten Zustands
Dieses CSS zeigt, wie der Rahmen des autonomen Custom-Elements <labeled-checkbox>
auf rot
geändert wird, wenn es sich im Zustand "checked" befindet.
labeled-checkbox {
border: dashed red;
}
labeled-checkbox:state(checked) {
border: solid;
}
Ein Live-Beispiel für diesen Code finden Sie unter Vergleich des benutzerdefinierten Zustands eines benutzerdefinierten Checkbox-Elements auf der CustomStateSet
-Seite.
Vergleich eines benutzerdefinierten Zustands im Shadow-DOM eines Custom-Elements
Dieses Beispiel zeigt, wie die :state()
-Pseudo-Klasse innerhalb der :host()
-Pseudo-Klasse verwendet werden kann, um benutzerdefinierte Zustände innerhalb der Implementierung eines Custom-Elements zu vergleichen.
Das folgende CSS fügt ein graues [x]
vor dem Element ein, wenn es sich im Zustand "checked" befindet.
:host(:state(checked))::before {
content: "[x]";
}
Ein Live-Beispiel für diesen Code finden Sie unter Vergleich des benutzerdefinierten Zustands eines benutzerdefinierten Checkbox-Elements auf der CustomStateSet
-Seite.
Vergleich eines benutzerdefinierten Zustands in einem Shadow-Part
Dieses Beispiel zeigt, wie die :state()
-Pseudo-Klasse verwendet werden kann, um die Shadow-Parts eines Custom-Elements anzusprechen.
Shadow-Parts werden durch das part
-Attribut definiert und benannt.
Beispielsweise verwenden wir ein Custom-Element <question-box>
, das ein <labeled-checkbox>
-Custom-Element als ein Shadow-Part namens checkbox
definiert:
shadowRoot.innerHTML = `<labeled-checkbox part='checkbox'>Yes</labeled-checkbox>`;
Das folgende CSS zeigt, wie das ::part()
-Pseudo-Element verwendet werden kann, um das 'checkbox'
-Shadow-Part zu vergleichen.
Weiterhin zeigt es, wie mithilfe der ::part()
-Pseudo-Element in Kombination mit der :state()
-Pseudo-Klasse das gleiche Part angesprochen werden kann, wenn es sich im Zustand checked
befindet.
question-box::part(checkbox) {
color: red;
}
question-box::part(checkbox):state(checked) {
color: green;
}
Ein Live-Beispiel für diesen Code finden Sie unter Vergleich eines benutzerdefinierten Zustands in einem Shadow-Part eines Custom-Elements auf der CustomStateSet
-Seite.
Spezifikationen
Specification |
---|
HTML # selector-custom |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Custom state pseudo-class selector ( :state() ) |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Has more compatibility info.