CSS: Die Klasse einer Klasse abfragen

Manchmal steht man bei CSS vor dem Problem, dass man eine Gruppe von Elementen hat, die über Klassen identifiziert werden und nur wenn diese Elemente eine bestimmte weitere Klasse kriegen, anders behandelt werden sollen - jedoch nur, wenn die Klassen in der Verbindung miteinander auftreten.

Das Problem ist, dass man mit CSS zwar auf eine Klasse oder ID beschränken kann, aber dann nur noch auf Kind-Elemente verfeinern kann.


#content .uebersicht .active { … }


Das wäre aber nicht das angestrebte Ergebnis, so greifen wir nicht auf Elemente der Klasse "uebersicht" zu, die auch die Klasse "active" haben, sondern auf Elemente der Klasse "active" innerhalb der Klasse "uebersicht".

Mit CSS ist es aber mittlerweile möglich Werte von Attributen abzufragen. Und die Klassen-Zuweisung bei HTML ist natürlich auch nichts weiter als ein Attribut-Werte-Paar.
Mit folgendem Code kommen wir der Lösung schon näher:


#content .uebersicht[class="active"] { … }


Das ist allerdings noch nicht funktionstüchtig. Mit diesem Code macht CSS einen genauen Vergleich und da das Class-Attribut zwei Werte (Klassen) hat (class="uebersicht active") greift diese Definition hier nicht.

Eine kleine zusätzliche Tilde ändert die Abfrage von "genau gleich" auf "enthält den Wert".


#content .uebersicht[class~="active"] { … }


Die Kombination "Tilde-Gleich" sorgt dafür, dass nach "active" im Class-Attribut gesucht wird, es dürfen also mehrere Klassen vorkommen.

Ich gebe zu, dieser Anwendungsfall ist speziell. Normalerweise könnte man einfach auf die Klasse "active" zugreifen, aber neulich hatte ich mal den Sonderfall, weshalb ich nach einer Lösung forschte und mir dachte das neu erlangte Wissen mal teilen zu können, vielleicht hilft es ja irgendwem.