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 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 abzugleichen oder auszuwählen, die Sie stylen möchten. Selektoren werden auch in JavaScript verwendet, um die DOM-Knoten auszuwählen, die als NodeList zurückgegeben werden sollen.
Selektoren, ob in CSS oder JavaScript verwendet, ermöglichen die Zielauswahl von HTML-Elementen basierend auf ihrem Typ, Attributen, aktuellen Zuständen und sogar der Position im DOM. Kombinatoren erlauben 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 Trennzeichen
+(Nachbar-Kombinator)>(Kind-Kombinator)~(Folge-Kombinator)- " " (Nachfahre-Kombinator)
|(Namespace-Trennzeichen),(Selektorenliste)
Das CSS Selektoren Modul führt auch den Spalten-Kombinator (||) 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-Selektoralias 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 Pseudo-Klassen :blank, :current und :local-link ein. Derzeit wird keine dieser Funktionen von Browsern unterstützt.
Begriffe
Leitfäden
- CSS Selektoren und Kombinatoren
-
Überblick über die verschiedenen Arten von einfachen Selektoren und verschiedenen Kombinatoren, die im CSS Selektoren und den CSS Pseudo Modulen definiert sind.
- Struktur von CSS Selektoren
-
Erklärung der Struktur von CSS Selektoren und der im CSS Selektoren Modul eingeführten Begriffe, von "einfachem Selektor" bis zu "verzeihender relativer Selektorenliste".
- Pseudo-Klassen
-
Listet die Pseudo-Klassen 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
:targetPseudo-Klasse in Selektoren -
Erfahren Sie, wie Sie die
:targetPseudo-Klasse verwenden, um das Zielelement eines URL-Fragmentbezeichners zu stylen. - Datenschutz und der
:visitedSelektor -
Untersucht die Stilbeschränkungen, die auf die
:visitedKlasse zum Schutz der Privatsphäre der Nutzer gesetzt sind. - 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 UI Pseudo-Klassen kennen, die für das Styling von Formularen in verschiedenen Zuständen zur Verfügung stehen.
- Auswahl und Traversieren im DOM-Baum
-
Die Selektoren-API ermöglicht die Verwendung von Selektoren in JavaScript, um Elementknoten aus dem DOM abzurufen.
Verwandte Konzepte
-
state()Pseudo-Klasse -
CSS Verschachtelung Modul
-
CSS Bereichsbegrenzung Modul
:hostPseudo-Klasse:host()Pseudo-Klasse:host-context()Pseudo-Klasse:has-slottedPseudo-Klasse::slottedPseudo-Element
-
CSS Überlauf Modul
-
CSS Mehrspaltiges Layout Modul
-
CSS paged media Modul
-
CSS Pseudo-Element Modul (darstellend Entitäten, die nicht in HTML enthalten sind)
-
::partPseudo-Element
-
Andere Pseudo-Elemente
-
@namespaceAt-Regel !important-
Document.querySelectorMethode -
Document.querySelectorAllMethode -
NodeList.forEach()Methode
Spezifikationen
| Specification |
|---|
| Selectors Level 4 |