CSS Geschwister-Selektor – Referenz und Beispiel

stylesheet.css · Geschwister-Selektor (adjacent sibling)

h2 + p {
  outline: 2px solid #7A2FB0;
}

Überschrift

Erster Absatz direkt nach der Überschrift, mit einem Link und einem Zitat.

Zweiter Absatz, Klasse extra.

Erster Listenpunkt
Zweiter Listenpunkt mit Link
Dritter Listenpunkt

Dritter Absatz, ohne Klasse.

Selektorh2 + p

Treffer–

Spezifität–

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 <BR />, 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:

<p>Lorem <strong>ipsum</strong> dolor sit amet,
consectetuer <em>adipiscing</em> elit.</p>

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

<p>Lorem <strong>ipsum</strong> dolor sit amet,</p>
<p>consectetuer <em>adipiscing</em> elit.</p>

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.

Was Nachbarschaft bedeutet

Zwei Elemente sind Nachbarn, wenn sie dasselbe Elternelement haben und im Dokument unmittelbar aufeinanderfolgen. Unmittelbar bezieht sich dabei nur auf Elemente: Text zwischen beiden, Kommentare und Zeilenumbrüche im Quelltext heben die Nachbarschaft nicht auf.

Ein anderes Element dazwischen dagegen schon, und zwar unabhängig davon, ob es sichtbar ist. Ein leeres Element, das nur der Auszeichnung dient, unterbricht die Beziehung ebenso wie ein Absatz.

Der übliche Einsatz ist der Abstand zwischen aufeinanderfolgenden Elementen desselben Typs, etwa zwischen zwei Absätzen, ohne dass der erste einen Abstand nach oben bekäme. Der Selektor beschreibt genau das: nicht alle Absätze, sondern jeden Absatz, vor dem schon einer steht.

Nur vorwärts

Der Kombinator kennt nur eine Richtung. Er kann das folgende Element ansprechen, nie das vorangehende. Es gibt keine Schreibweise für den Absatz vor einer Überschrift, obwohl der Fall genauso oft vorkommt.

Der Grund liegt in der Art, wie ein Dokument verarbeitet wird. Es wird von oben nach unten gelesen und dargestellt, oft schon während es noch übertragen wird. Was bereits gesetzt ist, soll sich durch etwas, das später kommt, nicht wieder ändern müssen.

CSS 2.1 kennt außerdem nur diesen einen Geschwister-Kombinator. Für Elemente, die irgendwo nach einem anderen folgen, ohne unmittelbar an es anzugrenzen, kam später ein zweiter hinzu. Beide bleiben auf die Richtung nach unten beschränkt.

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.

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

Selektor Geschwister-Selektor (adjacent sibling)