:state() CSS-Pseudoklasse
Baseline
2024
Neu verfügbar
Seit May 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 stimmt mit benutzerdefinierten Elementen überein, die den angegebenen benutzerdefinierten Status haben.
Syntax
:state(<custom identifier>) {
/* ... */
}
Parameter
Die :state()-Pseudoklasse nimmt als Argument einen benutzerdefinierten Bezeichner, der den Zustand des benutzerdefinierten Elements beschreibt, mit dem eine Übereinstimmung erfolgen soll.
Beschreibung
Elemente können aufgrund von Benutzerinteraktion und anderen Faktoren zwischen Zuständen wechseln.
Zum Beispiel kann sich ein Element im "hover"-Zustand befinden, wenn ein Benutzer über das Element 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 gestylt werden.
In ähnlicher Weise können autonome benutzerdefinierte Elemente (benutzerdefinierte Elemente, die nicht von integrierten 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 benutzerdefinierten Elements werden durch Zeichenfolgenwerte dargestellt.
Diese Werte werden einem CustomStateSet-Objekt hinzugefügt oder daraus entfernt, das dem Element zugeordnet ist.
Die CSS :state()-Pseudoklasse stimmt mit einem Element überein, 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 abzugleichen.
Dies wird erreicht, indem :state() innerhalb der :host()-Pseudoklassenfunktion verwendet wird, die einen Zustand nur innerhalb des Shadow-DOM des aktuellen benutzerdefinierten Elements abgleicht.
Zusätzlich ermöglicht das ::part()-Pseudoelement, 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 des Shadow-Baums eines benutzerdefinierten Elements, die explizit zur stilistischen Anpassung an eine umgebende Seite offengelegt werden.)
Beispiele
Übereinstimmung eines benutzerdefinierten Zustands
Diese CSS zeigt, wie der Rahmen 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 dieses Codes in Aktion, siehe das Matching the custom state of a custom checkbox element-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 abzugleichen.
Der folgende CSS injiziert ein graues [x] vor das Element, wenn es sich im "checked"-Zustand befindet.
:host(:state(checked))::before {
content: "[x]";
}
Für ein Live-Beispiel dieses Codes in Aktion, siehe das Matching the custom state of a custom checkbox element-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 steuern.
Shadow-Parts werden mit dem part-Attribut definiert und benannt.
Betrachten Sie zum Beispiel ein benutzerdefiniertes Element namens <question-box>, das ein benutzerdefiniertes <labeled-checkbox>-Element als Shadow-Part namens checkbox verwendet:
shadowRoot.innerHTML = `<labeled-checkbox part='checkbox'>Yes</labeled-checkbox>`;
Der folgende CSS zeigt, wie das ::part()-Pseudoelement verwendet werden kann, um eine Übereinstimmung mit dem 'checkbox'-Shadow-Part zu erzielen.
Es zeigt dann, wie das ::part()-Pseudoelement, gefolgt von der :state()-Pseudoklasse, verwendet werden kann, um mit demselben Part zu übereinstimmen, 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 Codes in Aktion, siehe das Matching a custom state in a shadow part of a custom element-Beispiel auf der CustomStateSet-Seite.
Spezifikationen
| Spezifikation |
|---|
| HTML # selector-custom |