CSS-Selektoren

Das Modul CSS-Selektoren definiert die Muster zur Auswahl von Elementen, auf die dann eine Reihe von CSS-Regeln zusammen mit deren Spezifität 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 zu matchen 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, unabhängig davon, ob sie in CSS oder JavaScript verwendet werden, ermöglichen das Ansprechen von HTML-Elementen basierend auf ihrem Typ, ihren Attributen, aktuellen Zuständen und sogar Positionen im DOM. Kombinatoren ermöglichen es Ihnen, bei der Auswahl von Elementen präziser zu sein, indem Sie Elemente basierend auf ihrer Beziehung zu anderen Elementen auswählen.

Referenz

Kombinatoren und Trennzeichen

+ (Nachbar-Kombinator)
> (Kind-Kombinator)
|| (Spalten-Kombinator)
~ (Allgemeiner Geschwister-Kombinator)
" " (Nachkomme-Kombinator)
| (Namensraum-Trennzeichen)
, (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 Erbe-Selektor-Synonym 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
Klassenselektoren
ID-Selektoren
Typselektoren
Universelle Selektoren

Begriffe

Leitfäden

CSS-Selektoren und Kombinatoren: Überblick über die verschiedenen Arten von einfachen Selektoren und verschiedenen Kombinatoren, die im CSS-Selektoren-Modul 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 Terminologien, von "einfachen Selektoren" bis "nachgiebige relative Selektorenliste".
Pseudo-Klassen: Listet die Pseudo-Klassen auf, Selektoren, die die Auswahl von Elementen basierend auf Statusinformationen ermöglichen, die nicht im Dokument-Baum enthalten sind, definiert in den verschiedenen CSS- und HTML-Modulen.
Verwendung der :target-Pseudo-Klasse in Selektoren: Lernen Sie, wie Sie die :target-Pseudo-Klasse verwenden, um das Ziel-Element eines URL-Fragment-Bezeichners zu stylen.
Datenschutz und der :visited-Selektor: Erforscht die Stilbeschränkungen auf der :visited-Klasse zu Gunsten des Benutzerdatenschutzes.
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 sowie Kombinatoren.
Lernen: UI-Pseudo-Klassen: Lernen Sie die verschiedenen UI-Pseudo-Klassen, die zum Stylen von Formularen in verschiedenen Zuständen verfügbar sind.
Lokalisieren von DOM-Elementen mithilfe von Selektoren: Die Selektoren-API ermöglicht es, Selektoren in JavaScript zu verwenden, um Elementknoten aus dem DOM abzurufen.

Spezifikationen

Specification
Selectors Level 4