Schönes neues CSS: General Sibling Combinator (~)

n

Dieser Artikel aus der Serie über schönes neues CSS befasst sich im Gegensatz zu den Beiträgen über Textschatten mit CSS, alternativen Farbangaben und font-size-adjust mit einem CSS3-Selektor, das gar nicht mal so neu ist – selbst der Internet Explorer 7 versteht ihn schon! Er ist trotzdem recht unbekannt, was bei diesem schönen Namen ein Jammer ist …

n

General Sibling Combinator? Bitte was?

n

Nicht vom Namen erschrecken lassen. Wir alle kennen doch aus CSS 2.1 den Adjacent sibling combinator, richtig? Der hat auch einen komplizierten Namen, ist aber tatsächlich nur der bekannte CSS-Selektor +. Möchte man beispielsweise den Absatz, der direkt auf ein <h1>-Element folgt mit fetter Schrift versehen, hilft eben dieser +-Selektor:

n

h1 + p {n    font-weight:bold;n}

n

Der General Sibling Combinator ist ganz ähnlich, nur erlaubt er uns, CSS-Regeln auf jedes einem bestimmenten HTML-Element folgende Objekt anzuwenden … der +-Selektor gilt bekanntermaßen nur für das erste folgende Objekt.

n

Wie benutzt man den General Sibling Combinator?

n

Der General Sibling Combinator wird durch eine Tilde dargestellt (~) und der Einsatz erfolgt wie beim +-Selektor:

n

h1 ~ p {n    font-weight:bold;n}

n

Schon sind alle <p>, die auf ein <h1> folgen, fett – vorausgesetzt sie teilen sich ein gemeinsames Elternelement. Am besten betrachtet man das Beispiel und den Vergleich mit dem Adjacent sibling combinator.

n

Welche Browser verstehen den General Sibling Combinator?

n

Bis auf den IE6 unterstützen alle relevanten Browser den ~-Selektor, egal ob Opera, Gecko-betreiben oder aus dem Webkit-Bestiarium stammend. Bei Firefox ist sogar die alte Version 2 in der Lage, den General Sibling Combinator zu verwenden und sogar der IE7 kann aus unerfindlichen Gründen etwas mit diesem CSS3-Selektor anfangen. Somit ist dieses schöne Stück CSS durchaus für den Fronteinsatz geeignet, wodurch sich einiges an Klassen und IDs einsparen lassen sollte.