:state()

Die :state() Pseudoklasse nimmt als Argument einen benutzerdefinierten Bezeichner, der den Zustand des zu betrachtenden benutzerdefinierten Elements repräsentiert.

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

Elemente können aufgrund von Benutzerinteraktionen 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 sich im "visited"-Zustand befinden, nachdem ein Benutzer darauf geklickt hat. Elemente, die von Browsern bereitgestellt werden, können basierend auf diesen Zuständen mithilfe von CSS-Pseudoklassen wie :hover und :visited gestaltet werden. Ebenso können autonome benutzerdefinierte Elemente (benutzerdefinierte Elemente, die nicht von standardmäßigen Elementen abgeleitet sind) ihre Zustände offenlegen, sodass Seiten, die diese Elemente verwenden, sie mithilfe der CSS :state() Pseudoklasse gestalten können.

Die Zustände eines benutzerdefinierten Elements werden durch Zeichenfolgenwerte repräsentiert. Diese Werte werden zu einem CustomStateSet-Objekt hinzugefügt oder daraus entfernt, das mit dem Element verknüpft 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 anzugeben. Dies wird erreicht, indem :state() innerhalb der :host() Pseudoklasse verwendet wird, die einen Zustand nur innerhalb des Shadow DOM des aktuellen benutzerdefinierten Elements betrachtet.

Darüber hinaus ermöglicht das ::part() Pseudoelement gefolgt von der :state() Pseudoklasse das Zuordnen von Shadow-Teilen eines benutzerdefinierten Elements, die sich in einem bestimmten Zustand befinden. (Shadow-Teile sind Teile eines Shadow-Baums eines benutzerdefinierten Elements, die explizit einer enthaltenden Seite zur Stilgestaltung zugänglich gemacht werden.)

Dieser CSS-Code 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 für diesen Code in Aktion finden Sie im Beispiel Übereinstimmung mit dem benutzerdefinierten Zustand eines benutzerdefinierten Checkbox-Elements auf der CustomStateSet-Seite.

Dieses Beispiel zeigt, wie die :state() Pseudoklasse innerhalb der :host() Pseudoklasse verwendet werden kann, um benutzerdefinierte Zustände innerhalb der Implementierung eines benutzerdefinierten Elements anzugeben.

Der folgende CSS-Code 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 für diesen Code in Aktion finden Sie im Beispiel Übereinstimmung mit dem benutzerdefinierten Zustand eines benutzerdefinierten Checkbox-Elements auf der CustomStateSet-Seite.

Dieses Beispiel zeigt, wie die :state() Pseudoklasse verwendet werden kann, um die Shadow-Teile eines benutzerdefinierten Elements anzusprechen.

Shadow-Teile werden mithilfe des part Attributs definiert und benannt. Betrachten Sie zum Beispiel ein benutzerdefiniertes Element namens <question-box>, das ein <labeled-checkbox> benutzerdefiniertes Element als Shadow-Teil namens checkbox verwendet:

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

Der folgende CSS-Code zeigt, wie das ::part() Pseudoelement verwendet werden kann, um den 'checkbox' Shadow-Teil zuzuordnen. Anschließend zeigt er, wie das ::part() Pseudoelement gefolgt von der :state() Pseudoklasse verwendet werden kann, um denselben Teil zuzuordnen, wenn er sich im checked-Zustand befindet.

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

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

Ein Live-Beispiel für diesen Code in Aktion finden Sie im Beispiel Übereinstimmung eines benutzerdefinierten Zustands in einem Shadow-Teil eines benutzerdefinierten Elements auf der CustomStateSet-Seite.

• CustomStateSet
• Pseudoklassen
• Pseudoklassen und Pseudoelemente
• Benutzerdefinierte Zustände und benutzerdefinierte Zustands-Pseudoklasse-CSS-Selektoren in Verwendung von benutzerdefinierten Elementen