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 auszuwählen oder zu selektieren, 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 das gezielte Ansprechen von HTML-Elementen basierend auf ihrem Typ, ihren Attributen, aktuellen Zuständen und sogar ihrer Position im DOM. Kombinatoren ermöglichen 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
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 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: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 von einfachen Selektoren und 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 von "einfacher Selektor" bis "verzeiht relativer 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, definiert in den verschiedenen CSS-Modulen und HTML.
- Lernen: CSS-Selektoren
-
Teil der CSS-Bausteine, beinhaltet Tutorials zu Typ-, Klassen- und ID-Selektoren, Attributselektoren, Pseudo-Klassen und Pseudo-Elemente, Kombinatoren, Konflikte handhaben, und Kaskadenschichten.
- Verwendung der
:target-Pseudo-Klasse in Selektoren -
Lernen Sie, wie Sie die
:target-Pseudo-Klasse verwenden, um das Ziel-Element eines URL-Fragmentidentifikators zu stylen. - Lernen: UI-Pseudo-Klassen
-
Lernen Sie die verschiedenen UI-Pseudo-Klassen kennen, die für das Styling 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.
Verwandte Konzepte
-
:popover-openPseudo-Klasse -
state()Pseudo-Klasse -
CSS-Verschachtelung Modul
-
CSS-Scopes Modul
:hostPseudo-Klasse:host()Pseudo-Klasse:host-context()Pseudo-Klasse::slottedPseudo-Element
-
CSS-Pseudo-Element-Modul (stellt Entitäten dar, die nicht im HTML enthalten sind)
-
::partPseudo-Element
-
Andere Pseudo-Elemente
-
@namespaceAt-Regel !important-
Document.querySelectorMethode -
Document.querySelectorAllMethode -
NodeList.forEach()Methode
Spezifikationen
| Specification |
|---|
| Selectors Level 4 |