Struktur von CSS-Selektoren
Der CSS-Selektor repräsentiert ein bestimmtes Muster von 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() Pseudoklasse enthalten sind, werden diese Selektoren als relative Selektoren bezeichnet, die Elemente relativ zu einem oder mehreren Ankerelementen darstellen.
Diese Selektoren können zu einer durch Kommas getrennten Selektorliste kombiniert werden. Wenn ein Selektor in einer nicht-vergebenden Selektorliste ungültig ist, wird die gesamte Selektorliste ungültig.
Einfacher Selektor
Ein einfacher Selektor ist ein Selektor mit einer einzigen Komponente, wie beispielsweise ein einzelner Typselektor, Attributselektor oder Pseudoklasse, der nicht in Kombination mit anderen Selektorkomponenten oder Kombinatoren verwendet wird oder diese enthält. Ein bestimmtes Element wird als passend zu einem einfachen Selektor angesehen, wenn dieser einfache Selektor das Element genau beschreibt. Jeder Selektor, der einen einzelnen Basisselektor, Attributselektor, Pseudoklasse oder Pseudoelement 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 repräsentiert eine Menge gleichzeitiger Bedingungen auf einem einzelnen Element. Ein bestimmtes Element wird als passend zu 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 Sequenz von Selektoren kommen. In der Sequenz ist nur ein Typselektor oder Universalselektor zulässig. Da Leerzeichen den Nachkommen-Kombinator darstellen, sind keine Leerzeichen zwischen den einfachen Selektoren erlaubt, die einen zusammengesetzten Selektor bilden.
Komplexer Selektor
Ein komplexer Selektor ist eine Abfolge von einem oder mehreren einfachen und/oder zusammengesetzten Selektoren, die durch Kombinatoren getrennt sind, einschließlich des Leerzeichen Nachkommen-Kombinators.
Ein komplexer Selektor stellt eine Menge gleichzeitiger Bedingungen auf einer Menge von Elementen dar.
a#selected > .icon {
}
.box h2 + p {
}
Selektoren können von rechts nach links gelesen werden. Zum Beispiel, a#selected > .icon wählt alle Elemente mit einer Klasse von icon aus, die direkte Kinder des <a> Elements mit der ID selected sind. Der Selektor .box h2 + p wählt das erste <p> nach jedem <h2> Element aus, das ein Nachkomme eines beliebigen Elements mit der Klasse box ist.
Selektorliste
Eine Selektorliste ist eine durch Kommas getrennte Liste von einfachen, zusammengesetzten und/oder komplexen Selektoren. Ein bestimmtes Element wird als passend zu einer Selektorliste angesehen, wenn das Element einen (mindestens einen) der Selektoren in dieser Selektorliste erfüllt.
#main,
article.heading {
}
Wenn ein Selektor in einer nicht-vergebenden Selektorliste ungültig ist, wird die gesamte Selektorliste ungültig.
#main,
:bad-pseudoclass,
.validClass {
/* `:bad-pseudoclass` is invalid, invalidating this style block */
}
Die :is() und :where() Pseudoklassen können verwendet werden, um vergebende Selektorlisten zu erstellen.
Relativer Selektor
Ein relativer Selektor ist ein Selektor, das ein Element relativ zu einem oder mehreren Ankerelementen darstellt, das von einem Kombinator vorangegangen wird. Relative Selektoren, die nicht mit einem expliziten Kombinator beginnen, haben einen impliziten Nachkommen-Kombinator.
Relative Selektoren können nicht in einer Selektorliste verwendet werden. Stattdessen werden sie in bestimmten Kontexten akzeptiert, wie etwa in der :has() Pseudoklasse.
:has(+ div#topic > #reference) {
}
:has(> .icon) {
}
dt:has(+ img) ~ dd {
}
Spezifikationen
| Specification |
|---|
| Selectors Level 4 |