CSS-Selektoren

Das CSS-Selektoren-Modul definiert die Muster zur Auswahl von Elementen, auf die 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 liefern zusätzliche Pseudoklassen-Selektoren und Pseudoelemente.

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

Selektoren, ob in CSS oder JavaScript verwendet, ermöglichen das Ansprechen von HTML-Elementen basierend auf ihrem Typ, ihren Attributen, aktuellen Zuständen und sogar ihrer Position im DOM. Kombinatoren erlauben es Ihnen, präziser zu sein, indem Sie Elemente basierend auf ihrer Beziehung zu anderen Elementen auswählen.

Referenz

Kombinatoren und Trenner

+ (Nachbar-Kombinator)
> (Kind-Kombinator)
|| (Spalten-Kombinator)
~ (Nachfolgender-Geschwister-Kombinator)
" " (Nachfahre-Kombinator)
| (Namensraum-Trenner)
, (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() (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
: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- Pseudoklassen
Attributselektoren
Klassen-Selektor
ID-Selektoren
Typ-Selektoren
Universelle Selektoren

Begriffe

Leitfäden

CSS-Selektoren und Kombinatoren: Überblick über die verschiedenen Typen von einfachen Selektoren und verschiedenen Kombinatoren, die in den CSS-Selektoren und den CSS-Pseudomodulen definiert sind.
Struktur der CSS-Selektoren: Erklärung der Struktur von CSS-Selektoren und der in dem CSS-Selektoren-Modul eingeführten Fachbegriffe, vom "einfachen Selektor" bis zur "nachsichtigen relativen Selektorenliste".
Pseudoklassen: Liste der Pseudoklassen, 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.
Verwendung der :target Pseudoklasse in Selektoren: Lernen Sie, wie Sie die :target Pseudoklasse verwenden, um das Ziel-Element eines URL-Fragment-Identifikators zu gestalten.
Datenschutz und der :visited Selektor: Untersucht die Stilbeschränkungen, die im Interesse der Privatsphäre auf die .visited-Klasse gesetzt werden.
CSS-Bausteine: CSS-Selektoren: Einführung in die grundlegenden CSS-Selektoren, einschließlich Tutorials zu Typ-, Klassen- und ID-Selektoren, Attributselektoren, Pseudoklassen und Pseudoelemente und Kombinatoren.
Lernen: UI-Pseudoklassen: Lernen Sie die verschiedenen UI-Pseudoklassen, 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 zu erhalten.

Spezifikationen

Specification
Selectors Level 4