CSS-Selektoren

Das CSS-Selektoren-Modul definiert die Muster zur Auswahl von Elementen, auf die eine Reihe von CSS-Regeln zusammen mit ihrer 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 auszuwählen oder zu selektieren, 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 sollen.

Selektoren, ob in CSS oder JavaScript verwendet, ermöglichen das gezielte Ansprechen von HTML-Elementen basierend auf ihrem Typ, ihren Attributen, aktuellen Zuständen und sogar ihrer Position im DOM. Kombinatoren ermöglichen eine präzisere Auswahl von Elementen, indem sie die Auswahl von Elementen basierend auf ihrer Beziehung zu anderen Elementen ermöglichen.

Referenz

Kombinatoren und Trennzeichen

+ (Nachfolgender Geschwister-Kombinator)
> (Kindkombinator)
|| (Spaltenkombinator)
~ (Nachfolgender Geschwister-Kombinator)
" " (Nachfahrkombinator)
| (Namespace-Trennzeichen)

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() (veraltete 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
Attributselektoren
Klassenselektor
ID-Selektoren
Typselektoren
Universelle Selektoren

Begriffe

Leitfäden

CSS-Selektoren und Kombinatoren: Überblick über die verschiedenen Arten von einfachen Selektoren und Kombinatoren, die im CSS-Selektoren- und im CSS-Pseudo-Modul definiert sind.
CSS-Selektorstruktur: Erklärung der Struktur von CSS-Selektoren und der im CSS-Selektoren-Modul eingeführten Terminologien, die von "einfacher Selektor" bis "verzeiht relativer Selektorliste" 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, definiert in den verschiedenen CSS-Modulen und HTML.
Lernen: CSS-Selektoren: Teil der CSS-Bausteine, beinhaltet Tutorials zu Typ-, Klassen- und ID-Selektoren, Attributselektoren, Pseudo-Klassen und Pseudo-Elemente, Kombinatoren, Konflikte handhaben, und Kaskadenschichten.
Verwendung der :target-Pseudo-Klasse in Selektoren: Lernen Sie, wie Sie die :target-Pseudo-Klasse verwenden, um das Ziel-Element eines URL-Fragmentidentifikators zu stylen.
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.
Auffinden von DOM-Elementen mit Selektoren: Die Selektoren-API ermöglicht die Verwendung von Selektoren in JavaScript, um Elementknoten aus dem DOM abzurufen.

Spezifikationen

Specification
Selectors Level 4