CSS-Selektorstruktur
Der CSS-Selektor repräsentiert ein bestimmtes Muster eines Elements oder mehrerer Elemente in einer Baumstruktur. Der Begriff "Selektor" kann sich auf einen einfachen Selektor, einen zusammengesetzten Selektor oder einen komplexen Selektor beziehen. Wenn diese Selektoren als Parameter in die Pseudoklasse :has() aufgenommen werden, werden sie als relative Selektoren bezeichnet und repräsentieren Elemente relativ zu einem oder mehreren Ankerelementen.
Diese Selektoren können zu einer kommagetrennten Selektorliste kombiniert werden. Wenn ein Selektor in einer nicht toleranten Selektorliste ungültig ist, wird die gesamte Selektorliste ungültig.
Einfacher Selektor
Ein einfacher Selektor ist ein Selektor mit einer einzigen Komponente, wie einem Typselektor, Attributselektor oder einer Pseudoklasse, die nicht in Kombination mit oder enthaltend mit einer anderen Selektorkomponente oder einem Kombinator verwendet wird. Ein gegebenes Element stimmt mit einem einfachen Selektor überein, wenn dieser einfache Selektor das Element genau beschreibt. Jeder Selektor, der einen grundlegenden Selektor, einen Attributselektor, eine Pseudoklasse oder einen Pseudoelement -Selektor enthält, ist ein einfacher Selektor.
#myId {
}
[pattern*="\d"] {
}
Zusammengesetzter Selektor
Ein zusammengesetzter Selektor ist eine Sequenz von einfachen Selektoren, die nicht durch einen Kombinator getrennt sind. Ein zusammengesetzter Selektor repräsentiert einen Satz gleichzeitiger Bedingungen für ein einzelnes Element. Ein gegebenes Element wird als mit einem zusammengesetzten Selektor übereinstimmend bezeichnet, wenn das Element mit allen einfachen Selektoren im zusammengesetzten Selektor übereinstimmt.
a#selected {
}
[type="checkbox"]:checked:focus {
}
In einem zusammengesetzten Selektor muss der Typselektor oder der universelle Selektor als erstes in der Selektorfolge stehen. Nur ein Typselektor oder universeller Selektor ist in der Folge 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 Sequenz von einem oder mehreren einfachen und/oder zusammengesetzten Selektoren, die durch Kombinatoren, einschließlich des Leerzeichenkombinators Nachfahre, getrennt sind.
Ein komplexer Selektor repräsentiert eine Reihe gleichzeitiger Bedingungen für eine Menge von Elementen.
a#selected > .icon {
}
.box h2 + p {
}
Selektoren können von rechts nach links gelesen werden. Zum Beispiel, a#selected > .icon stimmt mit allen Elementen mit einer Klasse von icon überein, die direkte Kinder des <a>-Elements mit der ID selected sind. Der Selektor .box h2 + p stimmt mit dem ersten <p> überein, das unmittelbar auf ein <h2> folgt, welches ein Nachkomme eines Elements mit der Klasse box ist.
Selektorliste
Eine Selektorliste ist eine kommagetrennte Liste von einfachen, zusammengesetzten und/oder komplexen Selektoren. Ein gegebenes Element stimmt mit einer Selektorliste überein, wenn das Element mit einem (mindestens einem) der Selektoren in dieser Selektorliste übereinstimmt.
#main,
article.heading {
}
Wenn ein Selektor in einer nicht toleranten Selektorliste ungültig ist, wird die gesamte Selektorliste ungültig.
#main,
:bad-pseudoclass,
.validClass {
/* `:bad-pseudoclass` is invalid, invalidating this style block */
}
Die Pseudoklassen :is() und :where() können verwendet werden, um tolerante Selektorlisten zu erstellen.
Relativer Selektor
Ein relativer Selektor ist ein Selektor, der ein Element relativ zu einem oder mehreren Ankerelementen repräsentiert, das von einem Kombinator vorangegangen wird. Relative Selektoren, die nicht mit einem expliziten Kombinator beginnen, haben einen implizierten Nachfahrenkombinator.
Relative Selektoren können nicht in einer Selektorliste verwendet werden. Sie werden vielmehr in bestimmten Kontexten akzeptiert, wie der Pseudoklasse :has().
:has(+ div#topic > #reference) {
}
:has(> .icon) {
}
dt:has(+ img) ~ dd {
}
Spezifikationen
| Specification |
|---|
| Selectors Level 4 |