Selektor für benachbarte Geschwisterelemente

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Zwei Elemente gelten als benachbarte Geschwisterelemente, wenn sie sich im HTML-Quelltext direkt "nebeneinander" befinden.

Um benachbarte Geschwisterelemente auszuwählen, werden diese mit einem Pluszeichen (+) verbunden, wie hier gezeigt:

Die Auswirkungen der Regeln des Selektors für benachbarte Geschwisterelemente sehen Sie in der folgenden Abbildung. Hier werden die Regeln nur auf das zweite und dritte Listenelement angewandt, weil dies die einzigen Listenelemente sind, die sich in der Hierarchie direkt "nebeneinander" befinden.

Abbildung: Der Selektor für benachbarte Geschwisterelemente wirkt sich nur auf das zweite und dritte Listenelement aus, weil diese in der Hierarchie direkt "nebeneinander" liegen.

Das Diagramm in der folgenden Abbildung zeigt, welche Elemente durch die CSS-Regel für benachbarte Geschwisterelemente betroffen sind.

Abbildung: Die in der vorigen Abbildung ausgewählten Elemente im Diagramm.

Warnung:
Benachbarte Geschwisterelemente werden auch in modernen Browsern nicht immer unterstützt. Dies gilt besonders für den Internet Explorer 6 für Windows. Mozilla, Firefox, Opera 5+ und Safari können jedoch auch mit Selektoren für benachbarte Geschwisterelemente korrekt umgehen.