CSS-Selector-Struktur
Der CSS-Selector stellt ein bestimmtes Muster von Elementen in einer Baumstruktur dar. Der Begriff "Selector" kann sich auf einen einfachen Selector, einen zusammengesetzten Selector oder einen komplexen Selector beziehen. Wenn sie als Parameter in der :has() Pseudo-Klasse verwendet werden, werden diese Selektoren als relative Selektoren bezeichnet und stellen Elemente relativ zu einem oder mehreren Anker-Elementen dar.
Diese Selektoren können zu einer kommagetrennten Selector-Liste kombiniert werden. Wenn ein Selector in einer nicht verzeihenden Selector-Liste ungültig ist, wird die gesamte Selector-Liste ungültig.
Einfacher Selector
Ein einfacher Selector ist ein Selector mit einer einzigen Komponente, wie beispielsweise ein einfacher Typ-Selector, Attribut-Selector oder eine Pseudo-Klasse, die nicht in Kombination mit oder ohne andere Selector-Komponente oder Kombinator verwendet wird. Ein bestimmtes Element wird als passend zu einem einfachen Selector betrachtet, wenn dieser einfache Selector das Element genau beschreibt. Jeder Selector, der einen einzigen Basis-Selector, Attribut-Selector, Pseudo-Klasse oder Pseudo-Element enthält, ist ein einfacher Selector.
#myId {
}
[pattern*="\d"] {
}
Zusammengesetzter Selector
Ein zusammengesetzter Selector ist eine Sequenz von einfachen Selectoren, die nicht durch einen Kombinator getrennt sind. Ein zusammengesetzter Selector repräsentiert eine Reihe von gleichzeitigen Bedingungen für ein einzelnes Element. Ein bestimmtes Element wird als passend zu einem zusammengesetzten Selector betrachtet, wenn das Element alle einfachen Selectoren im zusammengesetzten Selector erfüllt.
a#selected {
}
[type="checkbox"]:checked:focus {
}
In einem zusammengesetzten Selector muss der Typ-Selector oder Universal-Selector an erster Stelle in der Sequenz der Selectoren stehen. Nur ein Typ-Selector oder Universal-Selector ist in der Sequenz erlaubt. Da Leerraum den Nachkommen-Kombinator darstellt, ist zwischen den einfachen Selectoren, die einen zusammengesetzten Selector bilden, kein Leerraum erlaubt.
Komplexer Selector
Ein komplexer Selector ist eine Sequenz von einem oder mehreren einfachen und/oder zusammengesetzten Selectoren, die durch Kombinatoren getrennt sind, einschließlich des Leerraum-Nachkommen-Kombinators.
Ein komplexer Selector repräsentiert eine Reihe von gleichzeitigen Bedingungen für eine Gruppe von Elementen.
a#selected > .icon {
}
.box h2 + p {
}
Selectoren können von rechts nach links gelesen werden. Zum Beispiel: a#selected > .icon passt auf alle Elemente mit einer Klasse von icon, die unmittelbare Kinder des <a>-Elements mit der ID selected sind. Der Selector .box h2 + p passt auf die ersten <p>-Elemente, die unmittelbar nach jedem <h2> kommen, das ein Nachkomme eines beliebigen Elements mit der Klasse box ist.
Selector-Liste
Eine Selector-Liste ist eine kommagetrennte Liste von einfachen, zusammengesetzten und/oder komplexen Selectoren. Ein bestimmtes Element wird als passend zu einer Selector-Liste betrachtet, wenn es mit einem (mindestens einem) der Selectoren in dieser Liste übereinstimmt.
#main,
article.heading {
}
Wenn ein Selector in einer nicht verzeihenden Selector-Liste ungültig ist, wird die gesamte Selector-Liste 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 Selector-Listen zu erstellen.
Relativer Selector
Ein relativer Selector ist ein Selector, der ein Element relativ zu einem oder mehreren Anker-Elementen darstellt, die von einem Kombinator vorangehen. Relative Selektoren, die nicht mit einem expliziten Kombinator beginnen, haben einen implizierten Nachkommen-Kombinator.
Relative Selektoren können nicht in einer Selector-Liste verwendet werden. Vielmehr werden sie in bestimmten Kontexten akzeptiert, wie z.B. in der :has() Pseudo-Klasse.
:has(+ div#topic > #reference) {
}
:has(> .icon) {
}
dt:has(+ img) ~ dd {
}
Spezifikationen
| Specification |
|---|
| Selectors Level 4 |