: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 entspricht benutzerdefinierten Elementen, die den angegebenen benutzerdefinierten Zustand haben.
Syntax
:state(<custom identifier>) {
/* ... */
}
Parameter
Die :state()-Pseudoklasse nimmt als Argument einen benutzerdefinierten Bezeichner an, der den Zustand des benutzerdefinierten Elements darstellt, das übereinstimmen 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 darüber schwebt, oder ein Link kann sich im "visited"-Zustand befinden, 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.
In ähnlicher Weise können autonome benutzerdefinierte Elemente (benutzerdefinierte Elemente, die nicht von eingebauten Elementen abgeleitet sind) ihre Zustände offenlegen, wodurch Seiten, die die Elemente verwenden, sie 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 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 zu erfassen.
Dies wird erreicht, indem :state() innerhalb der :host()-Pseudoklasse verwendet wird, die einen Zustand nur innerhalb des Shadow-DOMs des aktuellen benutzerdefinierten Elements erfasst.
Darüber hinaus ermöglicht das ::part()-Pseudoelement, gefolgt von der :state()-Pseudoklasse, das Erfassen von Shadow-Teilen eines benutzerdefinierten Elements, die sich in einem bestimmten Zustand befinden. (Shadow-Teile sind Teile des Shadow-Baums eines benutzerdefinierten Elements, die explizit einer enthaltenen Seite zur Gestaltung zugänglich gemacht werden.)
Beispiele
Übereinstimmung eines benutzerdefinierten Zustands
Dieses CSS zeigt, wie die Umrandung des autonomen benutzerdefinierten Elements <labeled-checkbox> geändert wird, um rot zu sein, 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 sehen Sie das Beispiel Übereinstimmung des benutzerdefinierten Zustands eines benutzerdefinierten Checkbox-Elements auf der Seite CustomStateSet.
Übereinstimmung 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 ein, wenn es sich im "checked"-Zustand befindet.
:host(:state(checked))::before {
content: "[x]";
}
Für ein Live-Beispiel dieses Codes in Aktion sehen Sie das Beispiel Übereinstimmung des benutzerdefinierten Zustands eines benutzerdefinierten Checkbox-Elements auf der Seite CustomStateSet.
Übereinstimmung eines benutzerdefinierten Zustands in einem Shadow-Teil
Dieses Beispiel zeigt, wie die :state()-Pseudoklasse verwendet werden kann, um gezielt die Shadow-Teile eines benutzerdefinierten Elements anzusprechen.
Shadow-Teile werden über das part-Attribut definiert und benannt.
Betrachten Sie zum Beispiel ein benutzerdefiniertes Element namens <question-box>, das ein benutzerdefiniertes <labeled-checkbox>-Element als einen Shadow-Teil namens checkbox verwendet:
shadowRoot.innerHTML = `<labeled-checkbox part='checkbox'>Yes</labeled-checkbox>`;
Das folgende CSS zeigt, wie das ::part()-Pseudoelement verwendet werden kann, um gegen den 'checkbox'-Shadow-Teil abzugleichen.
Es zeigt dann, wie das ::part()-Pseudoelement, gefolgt von der :state()-Pseudoklasse, verwendet werden kann, um gegen dasselbe Teil 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 sehen Sie das Beispiel Übereinstimmung eines benutzerdefinierten Zustands in einem Shadow-Teil eines benutzerdefinierten Elements auf der Seite CustomStateSet.
Spezifikationen
| Specification |
|---|
| HTML # selector-custom |
Browser-Kompatibilität
Loading…