CSS-Selektoren

Das CSS-Selektoren-Modul definiert die Muster, um Elemente auszuwählen, auf die dann eine Reihe von CSS-Regeln angewendet werden, 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.

Selektoren, ob in CSS oder JavaScript verwendet, ermöglichen es, HTML-Elemente basierend auf ihrem Typ, ihren Attributen, aktuellen Zuständen und sogar ihrer Position im DOM zu zielgerichtet anzusprechen. Kombinatoren erlauben es, präziser zu sein, wenn Elemente ausgewählt werden, indem sie die Auswahl basierend auf ihrer Beziehung zu anderen Elementen ermöglichen.

Referenz

Kombinatoren und Separatoren

+ (Nachfolgender-Geschwister-Kombinator)
> (Kind-Kombinator)
~ (Nachfolgende-Geschwister-Kombinator)
" " (Nachkomme-Kombinator)
| (Namespace-Separator)
, (Selektorenliste)

Das CSS-Selektoren-Modul stellt auch den Spalten-Kombinator (||) vor. Derzeit unterstützen keine Browser dieses Feature.

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-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-Klassen
Attributselektoren
Klassenselektor
ID-Selektoren
Typen-Selektoren
Universelle Selektoren

Das CSS-Selektoren-Modul führt auch die :blank, :current und :local-link Pseudo-Klassen ein. Derzeit 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.
CSS-Selektorstruktur: Erklärung der Struktur von CSS-Selektoren und der Begriffe, die im CSS-Selektoren-Modul eingeführt wurden, von "einfachen Selektoren" bis zur "verzeihenden relativen Selektorenliste".
Pseudo-Klassen: Listet die Pseudo-Klassen auf, Selektoren, die die Auswahl von Elementen basierend auf Statusinformationen 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 stylen.
Privatsphäre und der :visited Selektor: Untersucht die Stilbeschränkungen, die aus Gründen der Nutzerprivatsphäre auf die :visited Klasse angewendet werden.
CSS-Bausteine: CSS-Selektoren: Einführung in die grundlegenden 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 verfügbaren UI-Pseudo-Klassen zum Stylen von Formularen in verschiedenen Zuständen.
Auswahl und Traversierung im DOM-Baum: Die Selektoren-API ermöglicht die Verwendung von Selektoren in JavaScript, um Elemente 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