Ein Geschwisterelement ist ein Element, das dasselbe Elternelement hat wie ein anderes. Geschwister stehen auf derselben Ebene und unterscheiden sich allein durch ihre Reihenfolge.
- Geschwisterelement
Ein Element, das dasselbe Elternelement hat wie ein anderes.
Beispiel: „Die Fehlermeldung steht als Geschwisterelement direkt hinter dem Eingabefeld.“Auch: Sibling, der englische Begriff.
Abgrenzung zum Kindelement: Das beschreibt die Beziehung nach unten, Geschwister die zur Seite.
/* der Absatz unmittelbar hinter der Überschrift */
h2 + p { margin-block-start: 0; }
/* alle Absätze, die nach der Überschrift folgen */
h2 ~ p { max-inline-size: 60ch; }Wie sich Geschwisterelemente auswählen lassen
Über zwei Verknüpfungen, die sich in der Reichweite unterscheiden. Die eine trifft genau das nächste Geschwister, die andere alle, die danach folgen. Beide greifen nur nach vorn, nie zurück.
Diese Einschränkung prägt den Aufbau von Markup bis heute: Wer ein Element gestalten will, das vor einem anderen steht, muss die Reihenfolge ändern oder zu Skripten greifen.
Warum die Reihenfolge der Geschwisterelemente zählt
Weil sie über mehr entscheidet als die Darstellung. Die Tastaturbedienung geht die Geschwister in dieser Folge durch, ein Vorleseprogramm liest sie in dieser Folge vor, und Auswahlregeln zählen sie in dieser Folge ab.
Deshalb ist eine Umstellung über die Gestaltung mehr als eine optische Entscheidung. Sichtbare und tatsächliche Reihenfolge fallen dann auseinander, und für alle, die nicht mit den Augen bedienen, bleibt die alte.
Wo Geschwisterelemente im Alltag auftauchen
Überall dort, wo zwei Dinge zusammengehören, ohne ineinander zu liegen: Beschriftung und Eingabefeld, Eingabefeld und Fehlermeldung, Überschrift und der Absatz darunter.
Für diese Paare ist die Geschwisterbeziehung oft die einzige Verbindung, die sich in der Gestaltung ausdrücken lässt. Wer sie zerschneidet, indem er eines der beiden einpackt, verliert sie.