:first-child, :last-child - CSS-Pseudo-Klassen

first-child, last-child

Mit first-child erreicht CSS das erste Kind-Element direkt unterhalb eines Selektors, mit last-child dementsprechend das letzte Kind-Element. Diese beiden Pseudo-Klassen weisen CSS-Stile also entsprechend der Verbindung zu einem Vorfahren-Element zu.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

first-child

Typische Beispiele sind der erste Ansatz p direkt unterhalb eines article- oder section-Elements oder das letzte li-Element direkt unterhalb eines ul-Elements.

Statt dem ersten Absatz unterhalb eines article- oder section-Elements eines eigene CSS-Klasse zuzuweisen, um den ersten Absatz z.B. durch eine größere Schrift zu kennzeichen, ist section p:first-child flexibler. Wenn irgendwann der erste Absatz gegen einen neuen ausgetauscht wird, muss die Klasse vom alten Absatz nicht entfernt und vor den neuen Absatz gesetzt werden.

section p:first-child {
	font-size: larger;
	color: slategray;
}

Noch einmal flexibler wäre section *:first-child – das erste Element unterhalb eines section-Bereichs.

section *:first-child {
	color: firebrick;
	font-weight: 700;
}

Anstelle von first-child kann auch nth-child(1) eingesetzt werden. Beide Schreibweisen bringen dasselbe Ergebnis: Sie sind gleich spezifisch und zeigen dasselbe Verhalten. Allenfalls wäre vielleicht :first-child besser lesbar als :nth-child(1), andererseits ist :nth-child(an+b) allgemeiner.

last-child

Das meistgenutzte last-child ist sicher das letzte li innerhalb eines ul-Elements, denn ul-Elemente sind der Klassiker der Navigation auf Webseiten.

nav li {
	border-bottom: 1px dotted white;
}
nav li:last-child {
	border-bottom: none
}

Wird die Navigation auf den kleineren Screens der mobilen Geräte als vertikale Liste dargestellt, wird das jeweils letzte Element einer Liste als border-bottom: none notiert.

Beispiel: Ausklappbares Hamburger-Menü ohne Javascript

only-child

Pseudoklassen lassen sich miteinander kombinieren – verketten. Und wenn ein Element sowohl erstes als auch letztes Element ist, ist es wohl das Einzige. Oder gleich only-child benutzen.

li:first-child:last-child {
	color:firebrick
}
… oder … 
li:only-child {
	color: navy 
}
  • Einzig und allein in dieser Liste
  • Einzig und allein in dieser Liste