Dieser Artikel ist Teil einer Serie:

  1. CSS-Counter
  2. Border-Image
  3. Box-Shadow
  4. Box-Si­zing
  5. Die Rückkehr der Tabellen
  6. CSS-Transforms
  7. Die Appearance-Eigenschaft
  8. Der General Sibling Com­bi­na­tor
  9. font-size-adjust
  10. Farben mit RGBA und HSL(A)
  11. Schat­ten­ef­fek­te

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 …

General Sibling Combinator? Bitte was?

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:

h1 + p {
    font-weight:bold;
}

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.

Wie benutzt man den General Sibling Combinator?

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

h1 ~ p {
    font-weight:bold;
}

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.

Welche Browser verstehen den General Sibling Combinator?

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.