:state()

Die :state()-Pseudo-Klasse nimmt als Argument einen benutzerdefinierten Bezeichner, der den Zustand des benutzerdefinierten Elements repräsentiert, das abgeglichen werden soll.

:state(<custom identifier>) {
  /* ... */
}

Elemente können aufgrund von Benutzerinteraktion und anderen Faktoren zwischen Zuständen wechseln. Ein Element kann beispielsweise im "hover"-Zustand sein, wenn ein Benutzer über das Element schwebt, 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 mit CSS-Pseudoklassen wie :hover und :visited gestylt werden. Ebenso 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 mithilfe der CSS-:state()-Pseudoklasse stylen können.

Die Zustände eines benutzerdefinierten Elements werden durch Zeichenfolgenwerte repräsentiert. 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.

Zudem ermöglicht die ::part()-Pseudo-Elementfunktion, gefolgt von der :state()-Pseudo-Klasse, das Abgleichen der Shadow-Parts eines benutzerdefinierten Elements, die sich in einem bestimmten Zustand befinden. (Shadow-Parts sind Teile eines benutzerdefinierten Element-Shadow-Baums, die explizit für das Styling einer enthaltenden Seite freigelegt werden.)

Dieses CSS zeigt, wie die Grenze 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 dieser Umsetzung finden Sie im Anpassen des benutzerdefinierten Zustands eines benutzerdefinierten Checkbox-Elements-Beispiel auf der CustomStateSet-Seite.

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.

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]";
}

Ein Live-Beispiel dieser Umsetzung finden Sie im Anpassen des benutzerdefinierten Zustands eines benutzerdefinierten Checkbox-Elements-Beispiel auf der CustomStateSet-Seite.

Dieses Beispiel zeigt, wie die :state()-Pseudoklasse verwendet werden kann, um auf die Shadow-Parts eines benutzerdefinierten Elements zu zielen.

Shadow-Parts werden mithilfe des part-Attributs definiert und benannt. Beispielsweise betrachten Sie ein benutzerdefiniertes Element namens <question-box>, das ein <labeled-checkbox>-benutzerdefiniertes Element als Shadow-Part mit dem Namen checkbox verwendet:

shadowRoot.innerHTML = `<labeled-checkbox part='checkbox'>Yes</labeled-checkbox>`;

Das CSS unten zeigt, wie das ::part()-Pseudo-Element verwendet werden kann, um gegen den 'checkbox'-Shadow-Part zu matchen. Es zeigt dann, wie das ::part()-Pseudo-Element, gefolgt von der :state()-Pseudo-Klasse, verwendet werden kann, um gegen denselben Part zu matchen, wenn er sich im checked-Zustand befindet.

question-box::part(checkbox) {
  color: red;
}

question-box::part(checkbox):state(checked) {
  color: green;
}

Ein Live-Beispiel dieser Umsetzung finden Sie im Anpassen eines benutzerdefinierten Zustands in einem Shadow-Part eines benutzerdefinierten Elements-Beispiel auf der CustomStateSet-Seite.

• CustomStateSet
• Pseudoklassen
• Lernen: Pseudoklassen und Pseudo-Elemente
• Benutzerdefinierte Zustände und benutzerdefinierte Zustands-Pseudoklassen-CSS-Selektoren in Verwendung von benutzerdefinierten Elementen