CSS-Selektoren
Das CSS-Selektoren-Modul definiert die Muster zur Auswahl von Elementen, auf die eine Reihe von CSS-Regeln zusammen mit ihrer specificity 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.
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 sollen.
Selektoren, ob in CSS oder JavaScript verwendet, ermöglichen die Zielauswahl von HTML-Elementen basierend auf ihrem Typ, ihren Attributen, aktuellen Zuständen und sogar ihrer Position im DOM. Kombinatoren ermöglichen es Ihnen, bei der Auswahl von Elementen präziser zu sein, indem Sie Elemente basierend auf ihrer Beziehung zu anderen Elementen auswählen können.
Referenz
Kombinatoren und Trennzeichen
+(Next-sibling Kombinator)>(Child Kombinator)||(Column Kombinator)~(Subsequent sibling Kombinator)- " " (Descendant Kombinator)
|(Namespace Trennzeichen)
Selektoren
:active:any-link:autofill:blank:buffering:checked:current:current():default:defined:dir():disabled:empty:enabled:first-child:first-of-type:focus:focus-visible:focus-within:fullscreen:future:has():hover:indeterminate:in-range:invalid:is():lang():last-child:last-of-type:link:local-link:matches()(veraltete Auswahl-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:optional:out-of-range:past:paused:picture-in-picture:placeholder-shown:playing:read-only:read-write:required:root:scope:seeking:stalled:target:target-within:user-invalid:user-valid:valid:visited:volume-locked:where():-webkit-Pseudo-Klassen- Attributselektoren
- Klassenselektor
- ID-Selektoren
- Typselektoren
- Universelle Selektoren
Begriffe
Leitfäden
- CSS-Selektoren und Kombinatoren
-
Überblick über die verschiedenen Arten einfacher Selektoren und die verschiedenen Kombinatoren, die im CSS-Selektoren- und im CSS-Pseudo-Modul definiert sind.
- CSS-Selektorstruktur
-
Erklärung der Struktur von CSS-Selektoren und der im CSS-Selektoren-Modul eingeführten Terminologien, die vom "einfachen Selektor" bis zur "verzeihenden relativen Selektorliste" reichen.
- Pseudo-Klassen
-
Listet die Pseudo-Klassen auf, Selektoren, die die Auswahl von Elementen basierend auf Zustandsinformationen ermöglichen, die nicht im Dokumentbaum enthalten sind, wie sie in den verschiedenen CSS-Modulen und HTML definiert sind.
- Lernen: CSS-Selektoren
-
Teil der CSS-Bausteine, beinhaltet Tutorials zu Typ-, Klassen- und ID-Selektoren, Attributselektoren, Pseudo-Klassen und Pseudo-Elemente, Kombinatoren, Umgang mit Konflikten und Kaskadierungsebenen.
- Verwendung der
:targetPseudo-Klasse in Selektoren -
Lernen Sie, wie Sie die
:targetPseudo-Klasse verwenden können, um das Zielelement eines URL-Fragment-Identifikators zu stylen. - Lernen: UI-Pseudo-Klassen
-
Lernen Sie die verschiedenen UI-Pseudo-Klassen kennen, die für die Gestaltung von Formularen in verschiedenen Zuständen verfügbar sind.
- Ermitteln von DOM-Elementen mit Selektoren
-
Die Selektoren-API ermöglicht die Verwendung von Selektoren in JavaScript, um Elementknoten aus dem DOM abzurufen.
Verwandte Konzepte
-
:popover-openPseudo-Klasse -
state()Pseudo-Klasse -
:hostPseudo-Klasse:host()Pseudo-Klasse:host-context()Pseudo-Klasse::slottedPseudo-Element
-
CSS-Pseudo-Element-Modul (darstellende Einheiten, 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 |