Struktur von CSS-Selektoren
Der CSS-Selektor repräsentiert ein bestimmtes Muster von Element oder Elementen in einer Baumstruktur. Der Begriff "Selektor" kann sich auf einen einfachen Selektor, einen zusammengesetzten Selektor oder einen komplexen Selektor beziehen. Wenn sie als Parameter in der :has() Pseudo-Klasse verwendet werden, werden diese Selektoren als relative Selektoren bezeichnet, die Elemente relativ zu einem oder mehreren Ankerelementen darstellen.
Diese Selektoren können zu einer durch Kommata getrennten Selektorliste kombiniert werden. Wenn irgendein Selektor in einer nicht-verzeihenden Selektorliste ungültig ist, wird die gesamte Selektorliste ungültig.
Einfacher Selektor
Ein einfacher Selektor ist ein Selektor mit einer einzigen Komponente, wie z.B. ein einzelner Typselektor, Attributselektor oder Pseudo-Klasse, der nicht in Kombination mit oder nicht enthalten in einer anderen Selektorkomponente oder einem Kombinator verwendet wird. Ein bestimmtes Element wird als übereinstimmend mit einem einfachen Selektor angesehen, wenn dieser einfache Selektor das Element genau beschreibt. Jeder Selektor, der einen einzelnen grundlegenden Selektor, Attributselektor, Pseudo-Klasse oder Pseudo-Element 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 gleichzeitiger Bedingungen an ein einzelnes Element dar. Ein bestimmtes Element wird als übereinstimmend mit einem zusammengesetzten Selektor angesehen, 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 Universalselektor zuerst in der Folge der Selektoren kommen. Es ist nur ein Typ- oder Universalselektor in der Folge erlaubt. Da Leerzeichen den Nachkommel-Kombinator 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 getrennt sind, einschließlich des Leerraum-Nachkommel-Kombinators.
Ein komplexer Selektor stellt eine Reihe gleichzeitiger Bedingungen für eine Menge von Elementen dar.
a#selected > .icon {
}
.box h2 + p {
}
Selektoren können von rechts nach links gelesen werden. Beispielsweise entspricht a#selected > .icon allen Elementen mit der Klasse icon, die direkte Kinder des <a>-Elements mit der ID selected sind. Der Selektor .box h2 + p entspricht den ersten <p>s, die direkt nach einem <h2>-Element kommen, das ein Nachkomme eines Elements mit der Klasse box ist.
Selektorliste
Eine Selektorliste ist eine durch Kommata getrennte Liste von einfachen, zusammengesetzten und/oder komplexen Selektoren. Ein bestimmtes Element wird als übereinstimmend mit einer Selektorliste angesehen, wenn das Element irgendeinen (mindestens einen) der Selektoren in dieser Selektorliste erfüllt.
#main,
article.heading {
}
Wenn irgendein Selektor in einer nicht-verzeihenden Selektorliste ungültig ist, wird die gesamte Selektorliste ungültig.
#main,
:bad-pseudoclass,
.validClass {
/* `:bad-pseudoclass` is invalid, invalidating this style block */
}
Die Pseudo-Klassen :is() und :where() können verwendet werden, um verzeihende Selektorlisten zu konstruieren.
Relativer Selektor
Ein relativer Selektor ist ein Selektor, der ein Element in Bezug auf ein oder mehrere Ankerelemente darstellt, dem ein Kombinator vorangeht. Relative Selektoren, die nicht mit einem expliziten Kombinator beginnen, haben einen impliziten Nachkommel-Kombinator.
Relative Selektoren können nicht in einer Selektorliste verwendet werden. Sie werden vielmehr in bestimmten Kontexten akzeptiert, wie zum Beispiel in der :has() Pseudo-Klasse.
:has(+ div#topic > #reference) {
}
:has(> .icon) {
}
dt:has(+ img) ~ dd {
}
Spezifikationen
| Specification |
|---|
| Selectors Level 4 |