CSS-Selektoren

Das CSS-Selectors-Modul definiert Muster, um Elemente auszuwählen, auf die eine Reihe von CSS-Regeln angewendet werden, zusammen mit ihrer Spezifität. Das CSS-Selectors-Modul bietet uns mehr als 60 Selektoren und fünf Kombinatoren. Andere Module bieten zusätzliche Pseudo-Klassen-Selektoren und Pseudo-Elemente.

In CSS sind Selektoren Muster, die verwendet werden, um die Elemente abzugleichen oder auszuwählen, die Sie gestalten möchten. Selektoren werden auch in JavaScript verwendet, um die Auswahl der DOM-Knoten zu ermöglichen, die als NodeList zurückgegeben werden.

Selektoren, sei es in CSS oder JavaScript, ermöglichen das Zielauswählen von HTML-Elementen basierend auf ihrem Typ, ihren Attributen, ihren aktuellen Zuständen und sogar ihrer Position im DOM. Kombinatoren erlauben eine präzisere Auswahl von Elementen, indem sie die Auswahl basierend auf ihrem Verhältnis zu anderen Elementen ermöglichen.

Referenz

Kombinatoren und Trennzeichen

+ (Nachfolge-Kombinator)
> (Kind-Kombinator)
|| (Spalten-Kombinator)
~ (Nachgestellter Geschwister-Kombinator)
" " (Nachfahre-Kombinator)
| (Namespace-Trenner)

Selektoren

:active
:any-link
:autofill
:blank
:buffering
:checked
:current
:current()
:default
:defined
:dir()
:disabled
:empty
:enabled
:first-child
:first-of-type
:focus
:focus-visible
:focus-within
:fullscreen
:future
:has()
:hover
:indeterminate
:in-range
:invalid
:is()
:lang()
:last-child
:last-of-type
:link
:local-link
:matches() (veralteter Alias für :is())
:modal
:muted
:not()
:nth-child()
:nth-of-type()
:nth-last-child()
:nth-last-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:past
:paused
:picture-in-picture
:placeholder-shown
:playing
:read-only
:read-write
:required
:root
:scope
:seeking
:stalled
:target
:target-within
:user-invalid
:user-valid
:valid
:visited
:volume-locked
:where()
:-webkit- Pseudo-Klassen
Attributselektoren
Klassenselektoren
ID-Selektoren
Typ-Selektoren
Universalselektoren

Begriffe

Leitfäden

CSS-Selektoren und Kombinatoren: Übersicht der verschiedenen Arten einfacher Selektoren und die verschiedenen Kombinatoren, die im Modul für CSS-Selektoren und CSS-Pseudo-Elemente definiert sind.
Struktur von CSS-Selektoren: Erklärung der Struktur von CSS-Selektoren und der im Modul für CSS-Selektoren eingeführten Terminologie, von "einfacher Selektor" bis hin zu "nachgiebiger relativer Selektorliste".
Pseudo-Klassen: Listet die Pseudo-Klassen, Selektoren, die die Auswahl von Elementen basierend auf Zustandsinformationen ermöglichen, die nicht im Dokumentbaum enthalten sind, definiert durch die verschiedenen CSS-Module und HTML.
Lernen: CSS-Selektoren: Teil der CSS-Bausteine, enthält Tutorials zu Typ-, Klassen- und ID-Selektoren, Attributselektoren, Pseudo-Klassen und Pseudo-Elemente, Kombinatoren, Umgang mit Konflikten und Cascading Layers.
Die :target Pseudo-Klasse in Selektoren verwenden: Lernen Sie, wie Sie die :target Pseudo-Klasse verwenden, um das Zielelement eines URL-Fragment-Identifikators zu gestalten.
Lernen: UI-Pseudo-Klassen: Lernen Sie die verschiedenen UI-Pseudo-Klassen kennen, die für das Styling von Formularen in verschiedenen Zuständen zur Verfügung stehen.
DOM-Elemente mittels Selektoren lokalisieren: Die Selektoren-API ermöglicht die Verwendung von Selektoren in JavaScript, um Knotenelemente aus dem DOM abzurufen.

Spezifikationen

Specification
Selectors Level 4