Klammern in CSS-Selektoren

Können Klammern in CSS-Selektoren integriert werden? Kann der Selektor insbesondere im Fall der Ausrichtung auf einen Header mit dem Text „Blockhead“ als (.gumby > .pokey) h3 geschrieben werden?

Eingeschränkte Verwendung von Klammern

Klammern gelten nicht gültige Operatoren in CSS-Selektoren. Sie sind für funktionale Notationen wie :lang(), :not() und :nth-child() reserviert.

Alternative für Klammern in Geschwisterbeziehungen

Im bereitgestellten Beispiel Klammern sind unnötig. Zur Auswahl des gewünschten Headers genügt der Selektor .gumby > .pokey h3.

CSS-Selektoren werden linear gelesen. Kombinatoren wie „>“ und „ “, die in diesem Selektor verwendet werden, haben keinen Vorrang. Der Selektor kann wie folgt interpretiert werden:

• Wählen Sie ein h3-Element aus
• Das folgt unmittelbar einem Element mit der Klasse „pokey“
• Das ist ein untergeordnetes Element eines Elements mit der Klasse „gumby“

Da sowohl das .pokey-Element als auch das h3-Element untergeordnete Elemente des .gumby-Elements im sind Mit der bereitgestellten HTML-Struktur zielt dieser Selektor korrekt auf den Header mit dem Text „Blockhead“ ab.