: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 wählt benutzerdefinierte Elemente aus, 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 durch Benutzerinteraktionen oder andere Faktoren zwischen Zuständen wechseln. Beispielsweise kann ein Element sich im „Hover“-Zustand befinden, wenn ein Benutzer mit der Maus darüber fährt, 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 gestaltet werden. Ähnlich können autonome benutzerdefinierte Elemente (benutzerdefinierte Elemente, die nicht von eingebauten Elementen abgeleitet sind) ihre Zustände anzeigen, sodass Seiten, die die Elemente verwenden, sie mithilfe der CSS :state()-Pseudoklasse gestalten können.
Die Zustände eines benutzerdefinierten Elements werden durch String-Werte 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()-Pseudoklasse verwendet wird, die einen Zustand nur innerhalb des Shadow DOM des aktuellen benutzerdefinierten Elements abgleicht.
Darüber hinaus ermöglicht das ::part()-Pseudoelement, gefolgt von der :state()-Pseudoklasse, das Abgleichen 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 für die Gestaltung auf einer zugehörigen Seite zur Verfügung gestellt werden.)
Beispiele
Abgleichen eines benutzerdefinierten Zustands
Dieses 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 Beispiel Abgleichen des benutzerdefinierten Zustands eines benutzerdefinierten Checkbox-Elements auf der CustomStateSet-Seite.
Abgleichen eines benutzerdefinierten Zustands im Shadow DOM eines benutzerdefinierten Elements
Dieses Beispiel zeigt, wie die :state()-Pseudoklasse innerhalb der :host()-Pseudoklasse verwendet werden kann, um benutzerdefinierte Zustände innerhalb der Implementierung eines benutzerdefinierten Elements abzugleichen.
Das folgende CSS fügt ein graues [x] vor dem Element hinzu, wenn es sich im „checked“-Zustand befindet.
:host(:state(checked))::before {
content: "[x]";
}
Für ein Live-Beispiel dieses Codes in Aktion, siehe das Beispiel Abgleichen des benutzerdefinierten Zustands eines benutzerdefinierten Checkbox-Elements auf der CustomStateSet-Seite.
Abgleichen 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 zielgerichtet anzusprechen.
Shadow-Parts werden mittels des part-Attributs definiert und benannt. Betrachten Sie beispielsweise ein benutzerdefiniertes Element namens <question-box>, das ein benutzerdefiniertes Element <labeled-checkbox> als 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 auf das 'checkbox'-Shadow-Part abzugleichen. Es zeigt auch, wie das ::part()-Pseudoelement gefolgt von der :state()-Pseudoklasse verwendet werden kann, um das gleiche Part abzugleichen, wenn es 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 Beispiel Abgleichen eines benutzerdefinierten Zustands in einem Shadow-Part eines benutzerdefinierten Elements auf der CustomStateSet-Seite.
Spezifikationen
| Specification |
|---|
| HTML # selector-custom |