: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

css

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

Parameter

Die :state() Pseudoklasse nimmt als Argument einen benutzerdefinierten Bezeichner, der den Zustand des benutzerdefinierten Elements, das übereinstimmen soll, repräsentiert.

Elemente können ihren Zustand durch Benutzerinteraktionen und andere Faktoren ändern. Zum Beispiel kann ein Element im "hover"-Zustand sein, wenn ein Benutzer über das Element fährt, oder ein Link kann im "visited"-Zustand sein, nachdem ein Benutzer darauf geklickt hat. Elemente, die von Browsern bereitgestellt werden, 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 integrierten Elementen abgeleitet sind) ihre Zustände offenlegen, sodass Seiten, die die Elemente verwenden, sie mit der CSS :state() Pseudoklasse gestalten können.

Die Zustände eines benutzerdefinierten Elements werden durch Zeichenkettenwerte repräsentiert. Diese Werte werden einem CustomStateSet-Objekt, das mit dem Element assoziiert ist, hinzugefügt oder daraus entfernt. Die CSS :state() Pseudoklasse passt zu einem Element, 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-Funktion verwendet wird, die nur innerhalb des Schatten-DOMs des aktuellen benutzerdefinierten Elements einen Zustand erfasst.

Zusätzlich ermöglicht das ::part() Pseudoelement gefolgt von der :state() Pseudoklasse die Erfassung von Schatten-Teilen eines benutzerdefinierten Elements, die sich in einem bestimmten Zustand befinden. (Schatten-Teile sind Teile eines benutzerdefinierten Elements im Schattendom, die explizit für Gestaltungszwecke einer umgebenden Seite ausgesetzt werden.)

Beispiele

Einem benutzerdefinierten Zustand zuordnen

Dieses CSS zeigt, wie der Rahmen des autonomen benutzerdefinierten Elements <labeled-checkbox> auf rot geändert wird, wenn es sich im "checked"-Zustand befindet.

css

labeled-checkbox {
  border: dashed red;
}
labeled-checkbox:state(checked) {
  border: solid;
}

Ein Live-Beispiel für diesen Code finden Sie im Beispiel Matching the custom state of a custom checkbox element auf der CustomStateSet-Seite.

Einem benutzerdefinierten Zustand im Schatten-DOM eines benutzerdefinierten Elements zuordnen

Dieses Beispiel zeigt, wie die :state() Pseudoklasse innerhalb der :host() Pseudoklasse-Funktion benutzt werden kann, um benutzerdefinierte Zustände innerhalb der Implementierung eines benutzerdefinierten Elements zu erfassen.

Das folgende CSS fügt ein graues [x] vor dem Element ein, wenn es sich im "checked"-Zustand befindet.

css

:host(:state(checked))::before {
  content: "[x]";
}

Ein Live-Beispiel für diesen Code finden Sie im Beispiel Matching the custom state of a custom checkbox element auf der CustomStateSet-Seite.

Einem benutzerdefinierten Zustand in einem Schattenteil zuordnen

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

Schatten-Teile werden definiert und benannt mit dem part-Attribut. Zum Beispiel, betrachten Sie ein benutzerdefiniertes Element mit dem Namen <question-box>, das ein <labeled-checkbox>-benutzerdefiniertes Element als Schattenteil mit dem Namen checkbox verwendet:

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

Das unten stehende CSS zeigt, wie das ::part() Pseudoelement verwendet werden kann, um gegen das 'checkbox' Schattenteil zu vergleichen. Zudem zeigt es, wie das ::part() Pseudoelement gefolgt von der :state() Pseudoklasse verwendet werden kann, um gegen das gleiche Teil zu vergleichen, wenn es sich im checked-Zustand befindet.

css

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

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

Ein Live-Beispiel für diesen Code 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