CSS-Selektoren

Das CSS-Selektoren-Modul definiert die Muster, die verwendet werden, um Elemente auszuwählen, auf die dann ein Satz von CSS-Regeln angewendet wird, zusammen mit ihrer Spezifität. 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 finden oder 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 sollen.

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

Referenz

Kombinatoren und Trennzeichen

+ (Nachfolger-Kombinator)
> (Kind-Kombinator)
~ (nachfolgender Geschwister-Kombinator)
" " (Nachfahren-Kombinator)
| (Namespace-Trennzeichen)
, (Selektorliste)

Das CSS-Selektoren-Modul führt auch den Spalten-Kombinator (||) ein. Derzeit wird dieses Feature von keinem Browser unterstützt.

Selektoren

:active
:any-link
:autofill
:buffering
:checked
: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
:matches() (veraltetes Legacy-Selector-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
:user-invalid
:user-valid
:valid
:visited
:volume-locked
:where()
:-webkit- pseudo-classes
Attributselektoren
Klassenselektor
ID-Selektoren
Typselektoren
Universelle Selektoren

Das CSS-Selektoren-Modul führt auch die :blank, :current, und :local-link Pseudo-Klassen ein. Derzeit wird keine dieser Funktionen von Browsern unterstützt.

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-Pseudo-Modulen definiert sind.
CSS-Selektor Struktur: Erklärung der Struktur von CSS-Selektoren und der im CSS-Selektoren-Modul eingeführten Fachbegriffe, von "einfacher Selektor" bis "vergebende relative Selektor Liste".
Pseudo-Klassen: Listet die Pseudo-Klassen auf, Selektoren, die die Auswahl von Elementen basierend auf Zustandsinformationen ermöglichen, die nicht im Dokumentbaum enthalten sind, wie sie in den verschiedenen CSS-Modulen und HTML definiert sind.
Verwendung der :target Pseudo-Klasse in Selektoren: Erfahren Sie, wie Sie die :target Pseudo-Klasse nutzen, um das Ziel-Element eines URL-Fragmentbezeichners zu stylen.
Privatsphäre und der :visited Selektor: Untersucht die Stilbegrenzungen, die aus Gründen des Benutzerschutzes für die :visited-Klasse gelten.
CSS-Bausteine: CSS-Selektoren: Einführung in grundlegende CSS-Selektoren, inklusive Tutorials zu Typ-, Klassen- und ID-Selektoren, Attributselektoren, Pseudo-Klassen und -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.
Auswahl und Traversierung im DOM-Baum: Die Selektoren-API ermöglicht die Verwendung von Selektoren in JavaScript, um Elementknoten aus dem DOM abzurufen.

Spezifikationen

Specification
Selectors Level 4

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden