CSS-Selektoren
Das CSS-Selektoren-Modul definiert Muster, um Elemente auszuwählen, auf die dann eine Reihe von CSS-Regeln angewendet wird, zusammen mit ihrer Spezifität. Das CSS-Selektoren-Modul stellt uns mehr als 60 Selektoren und fünf Kombinatoren zur Verfügung. Andere Module bieten zusätzliche Pseudoklassen-Selektoren und Pseudo-Elemente.
Hinweis: Diese Seite führt ein CSS-Modul ein. Eine vollständige Liste aller Selektoren, die von CSS-Spezifikationen definiert sind, finden Sie auf der Selektoren Referenzseite.
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 der DOM-Knoten zu ermöglichen, die als NodeList zurückgegeben werden.
Selektoren, ob in CSS oder JavaScript verwendet, ermöglichen das Anvisieren 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 basierend auf der Beziehung zu anderen Elementen ermöglichen.
Referenz
Kombinatoren und Separatoren
+(Nachfolgender Geschwister-Kombinator)>(Kind-Kombinator)~(Nachfolgender Geschwister-Kombinator)- " " (Nachfahre-Kombinator)
|(Namespace-Separator),(Selektorliste)
Das CSS-Selektoren-Modul führt auch den Spalten-Kombinator (||) ein. Derzeit wird diese Funktion 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:interest-source:interest-target:invalid:is():lang():last-child:last-of-type:link:matches()(veraltetes Alias für den:is()-Selektor):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- Attribut-Selektoren
- Klassen-Selektor
- ID-Selektoren
- Typ-Selektoren
- Universelle Selektoren
Das CSS-Selektoren-Modul führt auch die :blank, :current und :local-link Pseudoklassen ein. Derzeit wird diese Funktion von keinem Browser unterstützt.
Begriffe
Leitfäden
- CSS-Selektoren und Kombinatoren
-
Überblick ü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 der im CSS-Selektoren-Modul eingeführten Begriffe, von "einfacher Selektor" bis "verzeihende relative Selektorliste".
- Pseudoklassen
-
Listet die Pseudoklassen auf, Selektoren, die die Auswahl von Elementen basierend auf Zustandsinformationen ermöglichen, die nicht im Dokumentbaum enthalten sind, und die in den verschiedenen CSS-Modulen und HTML definiert sind.
- Verwendung der
:targetPseudoklasse in Selektoren -
Erfahren Sie, wie Sie die
:targetPseudoklasse verwenden, um das Ziel-Element eines URL-Fragmentidenfikators zu gestalten. - Datenschutz und der
:visitedSelektor -
Untersucht die Stilbeschränkungen, die auf die
:visitedKlasse für den Datenschutz der Benutzer festgelegt wurden. - CSS-Grundbausteine: CSS-Selektoren
-
Einführung in grundlegende CSS-Selektoren, einschließlich Tutorials zu Typ-, Klassen- und ID-Selektoren, Attribut-Selektoren, Pseudoklassen und Pseudo-Elemente und Kombinatoren.
- Lernen: UI-Pseudoklassen
-
Lernen Sie die verschiedenen UI-Pseudoklassen kennen, die zum Gestalten 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.
Verwandte Konzepte
-
state()Pseudoklasse -
CSS-Verschachtelung Modul
-
CSS-Scope Modul
:hostPseudoklasse:host()Pseudoklasse:host-context()Pseudoklasse:has-slottedPseudoklasse::slottedPseudo-Element
-
CSS-Überlauf Modul
-
CSS-Mehrspalten-Layout Modul
-
CSS-Paged-Media Modul
-
CSS-Pseudo-Element-Modul (repräsentiert Entitäten, die nicht in HTML enthalten sind)
-
CSS-Teile des Schattens Modul
::partPseudo-Element
-
Andere Pseudo-Elemente
-
@namespaceAt-Regel !important-
Document.querySelectorMethode -
Document.querySelectorAllMethode -
NodeList.forEach()Methode
Spezifikationen
| Specification |
|---|
| Selectors Level 4 |