: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()-Pseudo-Klasse in CSS vergleicht Custom-Elemente, die sich in einem bestimmten benutzerdefinierten Zustand befinden.

Syntax

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

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

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 mit der Maus darüberfährt, oder ein Link kann sich im "Visited"-Zustand befinden, nachdem ein Benutzer darauf geklickt hat. Von Browsern bereitgestellte Elemente können mit CSS-Pseudo-Klassen wie :hover und :visited basierend auf diesen Zuständen gestaltet werden. Ähnlich können autonome Custom-Elemente (Custom-Elemente, die nicht von eingebauten Elementen abgeleitet sind) ihre Zustände offenlegen, sodass Seiten, die diese Elemente verwenden, sie mithilfe der CSS-Pseudo-Klasse :state() gestalten können.

Die Zustände eines Custom-Elements werden durch Zeichenketten dargestellt. Diese Werte werden hinzugefügt oder entfernt aus einem CustomStateSet-Objekt, das mit dem Element verknüpft ist. Die CSS-Pseudo-Klasse :state() vergleicht ein Element, wenn der angegebene Bezeichner, der als Argument übergeben wird, im CustomStateSet des Elements vorhanden ist.

Die Pseudo-Klasse :state() kann auch verwendet werden, um benutzerdefinierte Zustände innerhalb der Implementierung eines Custom-Elements zu vergleichen. Dies wird erreicht, indem :state() innerhalb der :host()-Pseudo-Klasse verwendet wird, die einen Zustand nur innerhalb des Shadow-DOM des aktuellen Custom-Elements vergleicht.

Zusätzlich ermöglicht die ::part()-Pseudo-Element in Kombination mit der :state()-Pseudo-Klasse den Vergleich von Shadow-Parts eines Custom-Elements, die sich in einem bestimmten Zustand befinden. (Shadow-Parts sind Teile des Shadow-DOM eines Custom-Elements, die explizit für Styling-Zwecke einer Seite zugänglich gemacht werden.)

Beispiele

Vergleich eines benutzerdefinierten Zustands

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

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

Ein Live-Beispiel für diesen Code finden Sie unter Vergleich des benutzerdefinierten Zustands eines benutzerdefinierten Checkbox-Elements auf der CustomStateSet-Seite.

Vergleich eines benutzerdefinierten Zustands im Shadow-DOM eines Custom-Elements

Dieses Beispiel zeigt, wie die :state()-Pseudo-Klasse innerhalb der :host()-Pseudo-Klasse verwendet werden kann, um benutzerdefinierte Zustände innerhalb der Implementierung eines Custom-Elements zu vergleichen.

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

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

Ein Live-Beispiel für diesen Code finden Sie unter Vergleich des benutzerdefinierten Zustands eines benutzerdefinierten Checkbox-Elements auf der CustomStateSet-Seite.

Vergleich eines benutzerdefinierten Zustands in einem Shadow-Part

Dieses Beispiel zeigt, wie die :state()-Pseudo-Klasse verwendet werden kann, um die Shadow-Parts eines Custom-Elements anzusprechen.

Shadow-Parts werden durch das part-Attribut definiert und benannt. Beispielsweise verwenden wir ein Custom-Element <question-box>, das ein <labeled-checkbox>-Custom-Element als ein Shadow-Part namens checkbox definiert:

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

Das folgende CSS zeigt, wie das ::part()-Pseudo-Element verwendet werden kann, um das 'checkbox'-Shadow-Part zu vergleichen. Weiterhin zeigt es, wie mithilfe der ::part()-Pseudo-Element in Kombination mit der :state()-Pseudo-Klasse das gleiche Part angesprochen werden kann, wenn es sich im Zustand checked 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 unter Vergleich eines benutzerdefinierten Zustands in einem Shadow-Part eines Custom-Elements auf der CustomStateSet-Seite.

Spezifikationen

Specification
HTML
# selector-custom

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Custom state pseudo-class selector (:state())

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.

Siehe auch