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 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.
Hinweis: Diese Seite stellt ein CSS-Modul vor. Eine vollständige Liste aller Selektoren, die durch die CSS-Spezifikationen definiert sind, finden Sie auf der Selektoren Referenzseite.
In CSS sind Selektoren Muster, die verwendet werden, um die Elemente, die Sie stylen möchten, zu erfassen oder auszuwählen. Selektoren werden auch in JavaScript verwendet, um die Auswahl der DOM-Knoten zu ermöglichen, die als NodeList zurückgegeben werden sollen.
Selektoren, ob in CSS oder JavaScript verwendet, ermöglichen es, HTML-Elemente basierend auf ihrem Typ, ihren Attributen, ihren aktuellen Zuständen und sogar ihrer Position im DOM zu zielen. Kombinatoren erlauben es Ihnen, präziser bei der Auswahl von Elementen zu sein, indem Sie die Auswahl basierend auf ihrer Beziehung zu anderen Elementen ermöglichen.
Referenz
Kombinatoren und Trennzeichen
+(Nachfolger-Kombinator)>(Kind-Kombinator)~(Nachfolgender-Geschwister-Kombinator)- " " (Nachfahren-Kombinator)
|(Namespace-Trennzeichen),(Selektorenliste)
Das CSS-Selektoren-Modul führt auch den Spalten-Kombinator (||) ein. 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:interest-source:interest-target:invalid:is():lang():last-child:last-of-type:link:matches()(veralteter 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-Pseudoklassen- Attributselektoren
- Klassenselektor
- ID-Selektoren
- Typselektoren
- Universalselektoren
Das CSS-Selektoren-Modul führt auch die :blank, :current und :local-link Pseudoklassen ein. Derzeit unterstützen keine Browser diese Features.
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-Selektorstruktur
-
Erklärung der Struktur von CSS-Selektoren und der in den CSS-Selektoren-Modulen eingeführten Begriffe, von "einfachem Selektor" bis "verzeihende relative Selektorenliste".
- Pseudoklassen
-
Listet die Pseudoklassen auf, 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
:targetPseudoklasse in Selektoren -
Erfahren Sie, wie Sie die
:targetPseudoklasse verwenden, um das Zielelement eines URL-Fragmentidentifikators zu stylen. - Privatsphäre und der
:visitedSelektor -
Erforscht die Stilbeschränkungen für die
:visitedKlasse zum Schutz der Privatsphäre der Benutzer. - CSS-Bausteine: CSS-Selektoren
-
Einführung in grundlegende CSS-Selektoren, einschließlich Tutorials zu Typ-, Klassen- und ID-Selektoren, Attributselektoren, Pseudoklassen und Pseudoelemente und Kombinatoren.
- Lernen: UI-Pseudoklassen
-
Lernen Sie die verschiedenen UI-Pseudoklassen kennen, die für das Styling von Formularen in verschiedenen Zuständen verfügbar sind.
- Auswahl und Traversierung auf dem DOM-Baum
-
Die Selektoren-API ermöglicht es, Selektoren in JavaScript zu verwenden, um Elementknoten aus dem DOM abzurufen.
Verwandte Konzepte
-
state()Pseudoklasse -
:xr-overlayPseudoklasse -
CSS-Nesting Modul
-
CSS-Scope Modul
:hostPseudoklasse:host()Pseudoklasse:host-context()Pseudoklasse:has-slottedPseudoklasse::slottedPseudoelement
-
CSS-Überlauf Modul
-
CSS-Mehrspalten-Layout Modul
-
CSS-Seitenmedien Modul
-
CSS-Pseudoelement-Modul (repräsentiert Entitäten, die nicht im HTML enthalten sind)
-
::partPseudoelement
-
Andere Pseudoelemente
-
@namespaceRegel !important-
Document.querySelectorMethode -
Document.querySelectorAllMethode -
NodeList.forEach()Methode