Ein Kindelement ist ein Element, das unmittelbar in einem anderen liegt. Ein Element kann beliebig viele davon haben oder gar keines.
- Kindelement
Ein Element, das unmittelbar in einem anderen liegt.
Beispiel: „Die Liste bekam drei Kindelemente, für jeden Eintrag eines.“Die Gegenrichtung ist das Elternelement.
Abgrenzung zum Nachfahren: Jedes Kind ist ein Nachfahre, aber ein Nachfahre kann mehrere Ebenen tiefer liegen.
/* nur die direkten Kinder des ul */
ul > li { margin-block: 4px; }
/* alle Nachfahren, auch in verschachtelten Listen */
ul li { color: #333; }Warum die Unterscheidung beim Kindelement zählt
Weil Auswahlregeln beides unterscheiden. Eine Regel für Kinder trifft nur die erste Ebene, eine für Nachfahren alles darunter. Wer das verwechselt, formatiert mehr oder weniger als gedacht.
Am deutlichsten wird es bei verschachtelten Listen. Eine Regel für Nachfahren greift auch in der inneren Liste, eine für Kinder bleibt in der äußeren.
Was Kindelemente in der Anordnung ausmacht
Sie sind die Einheiten, mit denen moderne Anordnungsverfahren arbeiten. In Flexbox und im Raster werden genau die direkten Kinder verteilt; was tiefer liegt, bleibt unberührt.
Deshalb entscheidet der Aufbau des Markups über die Möglichkeiten der Gestaltung. Eine zusätzliche Hülle um mehrere Elemente nimmt sie aus der Verteilung heraus.
Wie Kindelemente angesprochen werden
Über ihre Stellung. Eine Auswahlfunktion zählt sie durch und erlaubt Regeln für das erste, das letzte oder jedes zweite; das ist der Gegenstand von nth-child.
Gezählt werden dabei alle Geschwister, nicht nur die der gesuchten Art. Das ist die häufigste Überraschung bei dieser Auswahl und der Grund für Regeln, die scheinbar das Falsche treffen.