CSS-Selektoren

Das CSS-Selektoren-Modul definiert Muster zur Auswahl von Elementen, auf die eine Reihe von CSS-Regeln und deren specificity angewendet werden. Das CSS-Selektoren-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, die Sie stylen möchten, zu finden oder auszuwählen. Selektoren werden auch in JavaScript verwendet, um die Auswahl von DOM-Knoten zu ermöglichen, die als NodeList zurückgegeben werden.

Selektoren, die in CSS oder JavaScript verwendet werden, ermöglichen die gezielte Auswahl von HTML-Elementen basierend auf ihrem Typ, ihren Attributen, ihrem aktuellen Zustand und sogar ihrer Position im DOM. Kombinatoren ermöglichen eine präzisere Auswahl von Elementen anhand ihrer Beziehung zu anderen Elementen.

Referenz

Kombinatoren und Separatoren

+ (Nachfolgender Geschwister Kombinator)
> (Kind-Kombinator)
|| (Spalten-Kombinator)
~ (Nachfolgender Geschwister Kombinator)
" " (Nachfahre-Kombinator)
| (Namespace-Separator)

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() (veraltetes 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
: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
Attribut-Selektoren
Klassen-Selektor
ID-Selektoren
Typ-Selektoren
Universelle Selektoren

Begriffe

Leitfäden

CSS-Selektoren und Kombinatoren: Überblick über die verschiedenen Arten von einfachen Selektoren und verschiedenen Kombinatoren, die in den CSS-Selektoren und den CSS-Pseudo-Modulen definiert sind.
CSS-Selektorstruktur: Erklärung der Struktur von CSS-Selektoren und der in den CSS-Selektoren-Modulen eingeführten Begriffe, die von "einfacher Selektor" bis "verzeihende relative Selektorenliste" reichen.
Pseudo-Klassen: Listet die Pseudo-Klassen auf, Selektoren, die die Auswahl von Elementen basierend auf Zustandsinformationen ermöglichen, die nicht im Dokumentbaum enthalten sind und in den verschiedenen CSS-Modulen und HTML definiert sind.
Lernen: CSS-Selektoren: Teil der CSS-Bausteine, enthält Tutorials zu Typ-, Klassen- und ID-Selektoren, Attribut-Selektoren, Pseudo-Klassen und Pseudo-Elemente, Kombinatoren, Kaskade, Spezifität und Vererbung und Kaskadenebenen.
Verwendung der :target-Pseudo-Klasse in Selektoren: Lernen Sie, wie Sie die :target-Pseudo-Klasse verwenden, um das Ziel-Element eines URL-Fragment-Identifiers zu stylen.
Lernen: UI-Pseudo-Klassen: Lernen Sie die verschiedenen verfügbaren UI-Pseudo-Klassen, um Formulare in verschiedenen Zuständen zu stylen.
Aufspüren von DOM-Elementen mithilfe von Selektoren: Die Selektoren API ermöglicht es, Selektoren in JavaScript zu verwenden, um Elementknoten aus dem DOM zu erhalten.

Spezifikationen

Specification
Selectors Level 4