Der CSS-Selector stellt ein bestimmtes Muster von Elementen in einer Baumstruktur dar. Der Begriff "Selector" kann sich auf eineneinfachen Selector, einenzusammengesetzten Selector oder einenkomplexen Selector beziehen. Wenn sie als Parameter in der:has() Pseudo-Klasse verwendet werden, werden diese Selektoren alsrelative Selektoren bezeichnet und stellen Elemente relativ zu einem oder mehreren Anker-Elementen dar.

Diese Selektoren können zu einer kommagetrenntenSelector-Liste kombiniert werden. Wenn ein Selector in einernicht verzeihenden Selector-Liste ungültig ist, wird die gesamte Selector-Liste ungültig.

Einfacher Selector

Eineinfacher 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 einzigenBasis-Selector,Attribut-Selector,Pseudo-Klasse oderPseudo-Element enthält, ist ein einfacher Selector.

#myId {}[pattern*="\d"] {}

Zusammengesetzter Selector

Einzusammengesetzter Selector ist eine Sequenz voneinfachen Selectoren, die nicht durch einenKombinator 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 derTyp-Selector oderUniversal-Selector an erster Stelle in der Sequenz der Selectoren stehen. Nur ein Typ-Selector oder Universal-Selector ist in der Sequenz erlaubt. Da Leerraum denNachkommen-Kombinator darstellt, ist zwischen den einfachen Selectoren, die einen zusammengesetzten Selector bilden, kein Leerraum erlaubt.

Komplexer Selector

Einkomplexer 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 vonicon, die unmittelbare Kinder des<a>-Elements mit der IDselected 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 Klassebox ist.

Selector-Liste

EineSelector-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 einernicht 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, umverzeihende Selector-Listen zu erstellen.

Relativer Selector

Einrelativer 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 impliziertenNachkommen-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

Siehe auch

• CSS-Selektoren und Kombinatoren
• Verzeihende Selector-Liste
• Document.querySelector()
• Document.querySelectorAll()
• CSS-Selektoren Modul
• CSS-Pseudo-Elemente Modul