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

first-child, last-child

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

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

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

first-child

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