CSS 2.1: Geschwister-Selektor (`adjacent sibling`)

Syntax:

E1 + E2 { Deklarationen }

Die definierten Deklarationen gelten für jedes Element E2, das direkt auf ein Element E1 folgt und dasselbe Elternelement hat. Den Leerraum um den '+'-Kombinator kann man zur besseren Übersicht einfügen, er ist aber nicht zwingend.

Bedeutung:

(adjacent = angrenzend, nebenan; sibling = Geschwister)

Aus der Übersetzung wird schon deutlich, dass hier auf zwei direkt nebeneinander liegende Elemente Bezug genommen wird, die dasselbe Elternelement haben. Es kann sich dabei um Block-Level- oder Inline- Level- Elemente handeln. Die Forderung, dass die Elemente im Quellcode aufeinander folgen müssen, bedeutet nur, dass zwei hintereinander liegende Elemente angesprochen werden. Dazwischen liegender freier (unmarkierter) Text hat keinen Einfluß auf den Selektor. Liegt jedoch im Hypertext zwischen den Elementen E1 und E2 noch ein weiteres Element, und sei es nur ein  , werden die beiden Elemente nicht mehr als benachbart angesehen.

Beispiele:

Im folgenden Beispiel wird der linke Rand einer ungeordneten Liste um 5 Zeichenbreiten nach rechts verschoben, wenn sie direkt auf ein P-Element folgt:

P + UL { margin-left: 5em; }

Im nächsten Beispiel wird der Inhalt des Elementes EM in grün ausgegeben, wenn ihm ein Element STRONG vorausgeht. Vorsicht: etwas wie dies kann zu unerwarteten Ergebnissen führen, wenn beide Elemente mehrfach in einem langen Absatz verwendet werden:

STRONG+EM { color: #0c0; }

Das folgende Beispiel zeigt einen HTML- Code, auf den das vorhergehende Beispiel zutrifft:

Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.

Das folgende Beispiel zeigt einen HTML- Code, auf den das vorhergehende Beispiel nicht zutrifft:

Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.

Im folgenden Beispiel werden die zusammenfallenden Randabstände zwischen zwei P-Elementen wieder 'aufgehoben':

P { margin: 0.5em; } P + P { margin-top: 1em; }

Mit dem letzten Beispiel bringen wir einen besonderen Rahmen oberhalb aller Überschriften H3 an, die direkt auf eine Überschrift H2 folgen, aber nur dann, wenn dem Element H2 die Klasse class gegeben ist.

H2.class + H3 { border-top: 3px solid #d4d6da; }

Browserunterstützung

Der Geschwister-Selektor wird von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:

IE/Win 6:: MS IE/Win bis Version 6 erkennt den Geschwisterselektor noch nicht. IE/Mac dagegen erkennt ihn.
IE 7:: Von Version 7 an kann der IE alle Selektoren verarbeiten.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Besonderheiten im Medientyp `handheld`:

Dieser Selektor ist nicht Teil des Standards CSS Mobile Profile 1.0 und wird auch durch keinen Browser eines Mobilgerätes bisher umgesetzt.

Ausblick:

CSS3 erweitert das Konzept der direkt nebeneinander liegenden Geschwisterelemente insofern, dass auch Geschwisterelemente angesprochen werden können, die nicht im Quelltext aufeinander folgen.