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

Achtung: dieser Beitrag ist alt! Es kann gut sein, dass seine Inhalte nicht mehr aktuell sind.

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.

Kommentare (12)

  1. Klaus

    14. Juli 2008, 14:52 Uhr

    cool, wieder was gelernt, also sowohl "+" als auch "~". Hab mich bis jetzt allerdings auch noch nicht sonderlich mit sellektoren beschäftigt ^^

  2. kingduevel

    14. Juli 2008, 20:52 Uhr

    Puh, weiß auch noch nicht so ganz, ob es sich mal bei mir als sinnvoll erweist, diesen einzusetzen. Auf jeden Fall lese ich diese CSS-Serie immer wieder gern.

    Soll man dich in den Kommentaren eigentlich auf so Kleinkram wie den Tippfehler in der viertletzten Zeile hinweisen oder aus Ordnungsgründen eher nicht?

  3. Peter

    15. Juli 2008, 04:07 Uhr

    Zitat kingduevel:

    Soll man dich in den Kommentaren eigentlich auf so Kleinkram wie den Tippfehler in der viertletzten Zeile hinweisen oder aus Ordnungsgründen eher nicht?

    Immer nur her mit den Hinweisen!

  4. Herr Gabriel

    15. Juli 2008, 05:13 Uhr

    Und schon schrumpft mein Stylesheet.

    Wieder eine sehr nette Serie, die du da zusammenschusterst.

  5. Gerald - hyperkontext

    5. August 2008, 09:00 Uhr

    Manueller Trackback:
    Juli 2008 im Kontext

    [...] Peter Kröner macht auf den zum Sprachumfang von CSS-3 gehörenden Sibling-Combinator aufmerksam, der wundersamerweise sogar schon vom IE7 unterstützt wird [...]

  6. Locke

    22. Mai 2009, 10:15 Uhr

    eine frage:
    ist es denn nicht so theoretisch möglich auch auf effekte wie :hover von anderen geschwister elementen abzufangen?
    z.b.:

    .erster:hover~.zweiter{
    //und bei :hover von erster bekommt zweiter hier seine attribute
    }

  7. Peter

    22. Mai 2009, 10:28 Uhr

    Zitat Locke:

    ist es denn nicht so theoretisch möglich auch auf effekte wie :hover von anderen geschwister elementen abzufangen?

    Ja, das sollte gehen.

  8. Locke

    22. Mai 2009, 10:34 Uhr

    naja ich habs ausprobiert und es funktioniert nicht
    mit nem a:hover und nem img
    weder im ie8 noch im ff
    irgendeine idee?

  9. Peter

    22. Mai 2009, 10:37 Uhr

    Helfen vielleicht Leerzeichen?

    .erster:hover ~ .zweiter { foo:bar; }
  10. Locke

    22. Mai 2009, 10:41 Uhr

    nein macht keinen unterschied
    hier mal mein html:

    <div class="menu_container">
    <img src="" class="menu_img" >
    <a href="" class="menu_mainlevel" >irgendwas</a>
    </div>

    und mein css

    a.menu_mainlevel:hover ~ img.menu_img{
    background-color:white;
    filter:alpha(opacity=100);-moz-opacity:1;opacity:1;
    }

    ist da deiner meinung nach ein fehler drin?

  11. Locke

    22. Mai 2009, 11:08 Uhr

    ah ich habs gefunden, das hover element muss immer auch beim gerneral sibling selector vor dem zu beeinflussenden element stehen

    gibt es da irgendeine möglichkeit das zu umgehen?

  12. Peter

    22. Mai 2009, 11:15 Uhr

    Ich glaube nicht. Es gibt ja auch sonst bei CSS keine rückwärts wirkenden Selektoren (#foo < .bar:hover oder so).

Die Kommentarfunktion ist seit Juli 2014 deaktiviert, weil sie zu sehr von Suchmaschinenoptimierern für manuellen Spam mißbraucht wurde. Wenn du Anmerkungen oder Fragen zum Artikel hast, schreib mir eine E-Mail oder melde dich via Twitter.

Folgt mir!

Kauft mein Zeug!

Cover der HTML5-DVD
Infos auf html5-dvd.de, kaufen bei Amazon

Cover des HTML5-Buchs
Infos auf html5-buch.de, kaufen bei Amazon

Cover des CSS3-Buchs
Infos auf css3-buch.de, kaufen bei Amazon