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.
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
