: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 passt zu benutzerdefinierten Elementen, 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, zu dem eine Übereinstimmung hergestellt werden soll.
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 über das Element fährt, 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 mit CSS-Pseudoklassen wie :hover und :visited gestaltet werden. Ebenso 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 mit der CSS-Pseudoklasse :state() stilisieren 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-Pseudoklasse :state() passt zu einem Element, wenn der ü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 entsprechen. Dies wird erreicht, indem :state() innerhalb der :host() Pseudoklassenfunktion verwendet wird, die einen Zustand nur innerhalb des Schatten-DOM des aktuellen benutzerdefinierten Elements entspricht.
Zusätzlich ermöglicht das ::part() Pseudoelement, gefolgt von der :state() Pseudoklasse, die Übereinstimmung mit den Schatten-Teilen eines benutzerdefinierten Elements, die sich in einem bestimmten Zustand befinden. (Schatten-Teile sind Teile eines Schattenbaums eines benutzerdefinierten Elements, die explizit einer darüber liegenden Seite zur Stilgestaltung bereitgestellt werden.)
Beispiele
Einen benutzerdefinierten Zustand entsprechen
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;
}
Ein Live-Beispiel dieses Codes in Aktion finden Sie im Beispiel Matching the custom state of a custom checkbox element auf der CustomStateSet-Seite.
Einen benutzerdefinierten Zustand im Schatten-DOM eines benutzerdefinierten Elements entsprechen
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 entsprechen.
Das folgende CSS fügt eine graue [x] vor dem Element hinzu, wenn es sich im "checked"-Zustand befindet.
:host(:state(checked))::before {
content: "[x]";
}
Ein Live-Beispiel dieses Codes in Aktion finden Sie im Beispiel Matching the custom state of a custom checkbox element auf der CustomStateSet-Seite.
Einen benutzerdefinierten Zustand in einem Schatten-Teil entsprechen
Dieses Beispiel zeigt, wie die :state() Pseudoklasse verwendet werden kann, um die Schatten-Teile eines benutzerdefinierten Elements anzusprechen.
Schatten-Teile werden unter Verwendung des part Attributs definiert und benannt. Berücksichtigen Sie zum Beispiel ein benutzerdefiniertes Element namens <question-box>, das ein <labeled-checkbox> benutzerdefiniertes Element als Schatten-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 den 'checkbox' Schatten-Teil anzusprechen. Es zeigt dann, wie das ::part() Pseudoelement gefolgt von der :state() Pseudoklasse verwendet werden kann, um denselben Teil anzusprechen, wenn er im checked-Zustand ist.
question-box::part(checkbox) {
color: red;
}
question-box::part(checkbox):state(checked) {
color: green;
outline: dashed 1px green;
}
Ein Live-Beispiel dieses Codes in Aktion finden Sie im Beispiel Matching a custom state in a shadow part of a custom element auf der CustomStateSet-Seite.
Spezifikationen
| Specification |
|---|
| HTML # selector-custom |
Browser-Kompatibilität
Loading…