CSS-Selektoren

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

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

Selektoren, ob in CSS oder JavaScript verwendet, ermöglichen die Zielauswahl von HTML-Elementen basierend auf ihrem Typ, Attributen, aktuellen Zuständen und sogar der Position im DOM. Kombinatoren ermöglichen es Ihnen, präziser bei der Auswahl von Elementen zu sein, indem Sie die Auswahl basierend auf ihrer Beziehung zu anderen Elementen ermöglichen.

Referenz

Kombinatoren und Separatoren

+ (Nachfolgende Geschwister-Kombinator)
> (Kind-Kombinator)
|| (Spalten-Kombinator)
~ (Folgende Geschwister-Kombinator)
" " (Nachfahr-Kombinator)
| (Namensraum-Separator)
, (Selektorenliste)

Selektoren

:active
:any-link
:autofill
:blank
:buffering
:checked
:current
:default
:defined
:dir()
:disabled
:empty
:enabled
:first-child
:first-of-type
:focus
:focus-visible
:focus-within
:fullscreen
:future
:has()
:hover
:in-range
:indeterminate
:invalid
:is()
:lang()
:last-child
:last-of-type
:link
:local-link
:matches() (veralteter Legacy-Selektor-Alias für :is())
:modal
:muted
:not()
:nth-child()
:nth-of-type()
:nth-last-child()
:nth-last-of-type()
:only-child
:only-of-type
:open
:optional
:out-of-range
:past
:paused
:picture-in-picture
:placeholder-shown
:playing
:popover-open
: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
Klassenselektor
ID-Selektoren
Typselektoren
Universalselektoren

Begriffe

Leitfäden

CSS-Selektoren und Kombinatoren: Überblick über die verschiedenen Arten von einfachen Selektoren und verschiedenen Kombinatoren, die im CSS-Selektoren- und CSS-Pseudo-Modulen definiert sind.
Struktur von CSS-Selektoren: Erklärung der Struktur von CSS-Selektoren und der Begrifflichkeiten, die im CSS-Selektoren-Modul eingeführt werden, von "einfacher Selektor" bis "nachsichtige relative Selektorenliste".
Pseudo-Klassen: Listet die Pseudo-Klassen auf, Selektoren, die die Auswahl von Elementen basierend auf Zustandsinformationen ermöglichen, die nicht im Dokumentbaum enthalten sind, definiert in den verschiedenen CSS-Modulen und HTML.
Die :target-Pseudo-Klasse in Selektoren verwenden: Lernen Sie, wie Sie die :target-Pseudo-Klasse verwenden, um das Ziel-Element eines URL-Fragmentidentifikators zu stylen.
Privatsphäre und der :visited-Selektor: Untersucht die Stilbeschränkungen, die aus Gründen der Benutzerprivatsphäre auf die Klasse :visited gesetzt wurden.
CSS-Bausteine: CSS-Selektoren: Einführung in grundlegende CSS-Selektoren, einschließlich Tutorials zu Typ-, Klassen- und ID-Selektoren, Attributselektoren, Pseudo-Klassen und Pseudo-Elemente und Kombinatoren.
Lernen: UI-Pseudo-Klassen: Lernen Sie die verschiedenen UI-Pseudo-Klassen kennen, die für das Styling von Formularen in verschiedenen Zuständen verfügbar sind.
DOM-Elemente mit Selektoren lokalisieren: Die Selektoren-API ermöglicht die Verwendung von Selektoren in JavaScript, um Element-Knoten aus dem DOM zu holen.

Spezifikationen

Specification
Selectors Level 4