CSS-Selektoren

Das CSS-Selektoren-Modul definiert die Muster, um Elemente auszuwählen, auf die anschließend eine Reihe von CSS-Regeln zusammen mit ihrer 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 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 das Ziel von HTML-Elementen basierend auf ihrem Typ, ihren Attributen, aktuellen Zuständen und sogar ihrer Position im DOM. Kombinatoren erlauben eine präzisere Auswahl von Elementen, indem sie die Auswahl von Elementen basierend auf ihrer Beziehung zu anderen Elementen ermöglichen.

Referenz

Kombinatoren und Trennzeichen

+ (Adjazenter Geschwisterkombinator)
> (Kindkombinator)
~ (Nachfolgender Geschwisterkombinator)
" " (Nachkommen-Kombinator)
| (Namespace-Trennzeichen)
, (Selektorliste)

Das CSS-Selektoren-Modul führt auch den Spaltenkombinator (||) 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() (veralteter 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
Typselektoren
Universalselektoren

Das CSS-Selektoren-Modul führt auch die :blank, :current und :local-link Pseudo-Klassen ein. Derzeit werden diese Features von keinem Browser unterstützt.

Begriffe

Leitfäden

CSS-Selektoren und Kombinatoren: Übersicht über die verschiedenen Arten einfacher Selektoren und verschiedener Kombinatoren, die in den CSS-Selektoren und den CSS-Pseudo-Modulen definiert sind.
CSS-Selektorstruktur: Erklärung der Struktur von CSS-Selektoren und die in dem CSS-Selektoren-Modul eingeführten Begrifflichkeiten, von "einfacher Selektor" bis "fehlertolerante relative 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: Lernen Sie, wie Sie die :target-Pseudo-Klasse verwenden können, um das Zielelement eines URL-Fragmentidentifikators zu stylen.
Datenschutz und der :visited-Selektor: Untersucht die Stilbeschränkungen, die aus Datenschutzgründen auf die :visited-Klasse 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: Erfahren Sie mehr über die verschiedenen UI-Pseudo-Klassen, die für die Gestaltung 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 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