CSS-Selektoren
Das CSS-Selectors-Modul definiert Muster, um Elemente auszuwählen, auf die eine Reihe von CSS-Regeln angewendet werden, zusammen mit ihrer Spezifität. Das CSS-Selectors-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 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, sei es in CSS oder JavaScript, ermöglichen das Zielauswählen von HTML-Elementen basierend auf ihrem Typ, ihren Attributen, ihren aktuellen Zuständen und sogar ihrer Position im DOM. Kombinatoren erlauben eine präzisere Auswahl von Elementen, indem sie die Auswahl basierend auf ihrem Verhältnis zu anderen Elementen ermöglichen.
Referenz
Kombinatoren und Trennzeichen
+
(Nachfolge-Kombinator)>
(Kind-Kombinator)||
(Spalten-Kombinator)~
(Nachgestellter Geschwister-Kombinator)- " " (Nachfahre-Kombinator)
|
(Namespace-Trenner)
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()
(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
: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
- Klassenselektoren
- ID-Selektoren
- Typ-Selektoren
- Universalselektoren
Begriffe
Leitfäden
- CSS-Selektoren und Kombinatoren
-
Übersicht der verschiedenen Arten einfacher Selektoren und die verschiedenen Kombinatoren, die im Modul für CSS-Selektoren und CSS-Pseudo-Elemente definiert sind.
- Struktur von CSS-Selektoren
-
Erklärung der Struktur von CSS-Selektoren und der im Modul für CSS-Selektoren eingeführten Terminologie, von "einfacher Selektor" bis hin zu "nachgiebiger relativer Selektorliste".
- Pseudo-Klassen
-
Listet die Pseudo-Klassen, Selektoren, die die Auswahl von Elementen basierend auf Zustandsinformationen ermöglichen, die nicht im Dokumentbaum enthalten sind, definiert durch die verschiedenen CSS-Module und HTML.
- Lernen: CSS-Selektoren
-
Teil der CSS-Bausteine, enthält Tutorials zu Typ-, Klassen- und ID-Selektoren, Attributselektoren, Pseudo-Klassen und Pseudo-Elemente, Kombinatoren, Umgang mit Konflikten und Cascading Layers.
- Die
:target
Pseudo-Klasse in Selektoren verwenden -
Lernen Sie, wie Sie die
:target
Pseudo-Klasse verwenden, um das Zielelement eines URL-Fragment-Identifikators zu gestalten. - 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.
- DOM-Elemente mittels Selektoren lokalisieren
-
Die Selektoren-API ermöglicht die Verwendung von Selektoren in JavaScript, um Knotenelemente aus dem DOM abzurufen.
Verwandte Konzepte
-
:popover-open
Pseudo-Klasse -
state()
Pseudo-Klasse -
CSS Nesten Modul
-
CSS-Scoping Modul
:host
Pseudo-Klasse:host()
Pseudo-Klasse:host-context()
Pseudo-Klasse::slotted
Pseudo-Element
-
CSS Pseudo-Element Modul (repräsentiert Entitäten, die nicht in HTML enthalten sind)
-
::part
Pseudo-Element
-
Weitere Pseudo-Elemente
-
@namespace
Regel !important
-
Document.querySelector
Methode -
Document.querySelectorAll
Methode -
NodeList.forEach()
Methode
Spezifikationen
Specification |
---|
Selectors Level 4 |