Struktur von CSS-Selektoren
Der CSS-Selektor stellt ein bestimmtes Muster eines Elements oder von Elementen in einer Baumstruktur dar. Der Begriff "Selektor" kann sich auf einen einfachen Selektor, einen zusammengesetzten Selektor oder einen komplexen Selektor beziehen. Wenn sie als Parameter in der Pseudoklasse :has() enthalten sind, werden diese Selektoren als relative Selektoren bezeichnet, die Elemente relativ zu einem oder mehreren Ankerelementen darstellen.
Diese Selektoren können zu einer kommagetrennten Selektorenliste kombiniert werden. Wenn ein Selektor in einer nicht verzeihenden Selektorenliste ungültig ist, wird die gesamte Selektorenliste ungültig.
Einfacher Selektor
Ein einfacher Selektor ist ein Selektor mit einer einzigen Komponente, wie ein einzelner Typselektor, Attributselektor oder eine Pseudoklasse, die nicht in Kombination mit oder nicht andere Selektorkomponenten oder Kombinatoren enthält. Ein gegebenes Element soll einen einfachen Selektor erfüllen, wenn dieser einfache Selektor das Element genau beschreibt. Jeder Selektor, der einen einzelnen Basisselektor, Attributselektor, Pseudoklasse oder Pseudoelement Selektor enthält, ist ein einfacher Selektor.
#myId {
}
[pattern*="\d"] {
}
Zusammengesetzter Selektor
Ein zusammengesetzter Selektor ist eine Folge von einfachen Selektoren, die nicht durch einen Kombinator getrennt sind. Ein zusammengesetzter Selektor stellt eine Reihe von gleichzeitigen Bedingungen an ein einzelnes Element dar. Ein gegebenes Element soll einem zusammengesetzten Selektor entsprechen, wenn das Element alle einfachen Selektoren im zusammengesetzten Selektor erfüllt.
a#selected {
}
[type="checkbox"]:checked:focus {
}
In einem zusammengesetzten Selektor muss der Typselektor oder universelle Selektor zuerst in der Reihenfolge der Selektoren erscheinen. In der Reihenfolge ist nur ein Typselektor oder universeller Selektor erlaubt. Da Leerzeichen den Nachfahrenkombinator darstellen, sind keine Leerzeichen zwischen den einfachen Selektoren erlaubt, die einen zusammengesetzten Selektor bilden.
Komplexer Selektor
Ein komplexer Selektor ist eine Folge von einem oder mehreren einfachen und/oder zusammengesetzten Selektoren, die durch Kombinatoren, einschließlich des Leerraum-Nachfahrenkombinators, getrennt sind.
Ein komplexer Selektor stellt eine Reihe von gleichzeitigen Bedingungen an eine Gruppe von Elementen dar.
a#selected > .icon {
}
.box h2 + p {
}
Selektoren können von rechts nach links gelesen werden. Zum Beispiel passt a#selected > .icon auf alle Elemente mit einer Klasse von icon, die direkte Kinder des <a>-Elements mit der ID selected sind. Der Selektor .box h2 + p passt auf die ersten <p>s, die direkt nach einem <h2>-Element kommen, das ein Nachfahre eines Elements mit der Klasse box ist.
Selektorenliste
Eine Selektorenliste ist eine kommagetrennte Liste von einfachen, zusammengesetzten und/oder komplexen Selektoren. Ein gegebenes Element gilt als übereinstimmend mit einer Selektorenliste, wenn das Element mit einem (mindestens einem) der Selektoren in dieser Selektorenliste übereinstimmt.
#main,
article.heading {
}
Wenn ein Selektor in einer nicht verzeihenden Selektorenliste ungültig ist, wird die gesamte Selektorenliste ungültig.
#main,
:bad-pseudoclass,
.validClass {
/* `:bad-pseudoclass` is invalid, invalidating this style block */
}
Die Pseudoklassen :is() und :where() können verwendet werden, um verzeihende Selektorenlisten zu erstellen.
Relativer Selektor
Ein relativer Selektor ist ein Selektor, der ein Element relativ zu einem oder mehreren Ankerelementen darstellt, das von einem Kombinator vorausgeht. Relative Selektoren, die nicht mit einem expliziten Kombinator beginnen, haben einen implizierten Nachfahrenkombinator.
Relative Selektoren können nicht in einer Selektorenliste verwendet werden. Sie werden vielmehr in bestimmten Kontexten akzeptiert, wie zum Beispiel in der :has() Pseudoklasse.
:has(+ div#topic > #reference) {
}
:has(> .icon) {
}
dt:has(+ img) ~ dd {
}
Spezifikationen
| Specification |
|---|
| Selectors Level 4 |