CSS Selector-Struktur

Ein einfacher Selektor ist ein Selektor mit einer einzigen Komponente, wie z.B. ein einzelner Typ-Selektor, Attributselektor oder Pseudoklasse, der nicht in Kombination mit oder als Teil einer anderen Selektorkomponente oder Kombinator verwendet wird. Ein bestimmtes Element wird als übereinstimmend mit einem einfachen Selektor bezeichnet, wenn dieser einfache Selektor das Element genau beschreibt. Jeder Selektor, der einen einzelnen Basis-Selektor, Attributselektor, Pseudoklasse oder Pseudo-Element enthält, ist ein einfacher Selektor.

#myId {
}

[pattern*="\d"] {
}

Ein zusammengesetzter Selektor ist eine Sequenz von einfachen Selektoren, die nicht durch einen Kombinator getrennt sind. Ein zusammengesetzter Selektor stellt eine Menge simultaner Bedingungen auf ein einzelnes Element dar. Ein bestimmtes Element wird als übereinstimmend mit einem zusammengesetzten Selektor bezeichnet, wenn das Element mit allen einfachen Selektoren im zusammengesetzten Selektor übereinstimmt.

a#selected {
}

[type="checkbox"]:checked:focus {
}

In einem zusammengesetzten Selektor muss der Typ-Selektor oder universelle Selektor zuerst in der Sequenz der Selektoren stehen. Nur ein Typ-Selektor oder universeller Selektor ist in der Sequenz erlaubt. Da Leerzeichen den Nachfahren-Kombinator darstellen, sind keine Leerzeichen zwischen den einfachen Selektoren erlaubt, die einen zusammengesetzten Selektor bilden.

Ein komplexer Selektor ist eine Sequenz von einem oder mehreren einfachen und/oder zusammengesetzten Selektoren, die durch Kombinatoren getrennt sind, einschließlich des Leerzeichen Nachfahren-Kombinators.

Ein komplexer Selektor stellt eine Menge gleichzeitiger Bedingungen auf eine Menge von Elementen dar.

a#selected > .icon {
}

.box h2 + p {
}

Selektoren können von rechts nach links gelesen werden. Zum Beispiel, a#selected > .icon passt auf alle Elemente mit einer Klasse icon, die direkte Kinder des <a>-Elements mit der ID selected sind. Der Selektor .box h2 + p passt auf die ersten <p>-Elemente, die direkt auf ein <h2>-Element folgen, welches Nachfahren eines Elements mit der Klasse box ist.

Eine Selektorliste ist eine komma-getrennte Liste einfacher, zusammengesetzter und/oder komplexer Selektoren. Ein bestimmtes Element wird als übereinstimmend mit einer Selektorliste bezeichnet, wenn das Element mit einem (mindestens einem) der Selektoren in dieser Selektorliste übereinstimmt.

#main,
article.heading {
}

Wenn ein 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 Pseudoklassen :is() und :where() können verwendet werden, um verzeihende Selektorlisten zu erstellen.

Ein relativer Selektor ist ein Selektor, der ein Element relativ zu einem oder mehreren Anker-Elementen darstellt, dem ein Kombinator vorausgeht. Relative Selektoren, die nicht mit einem expliziten Kombinator beginnen, haben einen impliziten Nachfahren-Kombinator.

Relative Selektoren können nicht in einer Selektorliste verwendet werden. Sie werden vielmehr in bestimmten Kontexten akzeptiert, wie z.B. der Pseudoklasse :has().

:has(+ div#topic > #reference) {
}

:has(> .icon) {
}

dt:has(+ img) ~ dd {
}

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