CSS-Selektoren

Das CSS-Selektoren-Modul definiert die Muster zur Auswahl von Elementen, auf die eine Reihe von CSS-Regeln zusammen mit ihrer Spezifität angewendet wird. Das CSS-Selektoren-Modul stellt uns mehr als 60 Selektoren und fünf Kombinatoren zur Verfügung. 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 gestalten möchten. Selektoren werden auch in JavaScript verwendet, um die Auswahl von DOM-Knoten zu ermöglichen, die als NodeList zurückgegeben werden sollen.

Selektoren, ob in CSS oder JavaScript verwendet, ermöglichen die Zielsetzung von HTML-Elementen basierend auf ihrem Typ, ihren 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 das Auswählen von Elementen basierend auf ihrer Beziehung zu anderen Elementen ermöglichen.

Referenz

Kombinatoren und Separatoren

+ (Direkter Nachfolger-Kombinator)
> (Kind-Kombinator)
~ (Allgemeiner Geschwister-Kombinator)
" " (Nachfahre-Kombinator)
| (Namespace-Separator)
, (Selektorenliste)

Das CSS-Selektoren-Modul führt auch den Spalten-Kombinator (||) ein. Zurzeit unterstützen keine Browser diese Funktion.

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-Selektor-Alia 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-Klassen
Attributselektoren
Klassenselektor
ID-Selektoren
Typselektoren
Universalselektoren

Das CSS-Selektoren-Modul führt auch die :blank, :current und :local-link Pseudo-Klassen ein. Zurzeit unterstützen keine Browser diese Funktionen.

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.
Struktur von CSS-Selektoren: Erklärung der Struktur von CSS-Selektoren und der in den CSS-Selektoren-Modulen eingeführten Terminologien, von "einfachen Selektor" bis "verzeihende relative Selektorenliste".
Pseudo-Klassen: Listet die Pseudo-Klassen, 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 Pseudo-Klasse in Selektoren: Erfahren Sie, wie Sie die :target Pseudo-Klasse verwenden, um das Ziel-Element eines URL-Fragment-Identifiers zu gestalten.
Datenschutz und der :visited Selektor: Erforscht die Stileinschränkungen, die auf die :visited Klasse aus Datenschutzgründen angewendet werden.
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, und Kombinatoren.
Lernen: UI-Pseudo-Klassen: Lernen Sie die verschiedenen UI-Pseudo-Klassen kennen, die zur Gestaltung von Formularen in verschiedenen Zuständen verfügbar sind.
Auswahl und Traversierung auf dem 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