CSS: Pseudoklassen :first-child und :last-child

Zur Abwechslung gibt es mal wieder ein CSS-Artikel in diesem Weblog. Seit CSS1 existiert die Pseudoklasse :first-child und seit CSS3 :last-child. Mit :first-child spricht man das erste und mit :last-child das letzte Kindelement eines Elternelements an. Verstanden? Nein, hier ein Beispiel:

<div id="sidebar">
    <h3>Erste Überschrift</h3>
    <p>...</p>

    <h3>Überschrift</h3>
    <p>...</p>

    <h3>Letzte Überschrift</h3>
    <p>...</p>
</div>

Das obere Code-Beispiel stellt eine recht übliche Seitenleiste aka Sidebar dar. Jetzt könnte es sein, dass man der ersten Überschrift den oberen, äußeren Abstand (margin-top) wegnehmen möchte, damit es auf der gleichen Höhe wie der Inhalt anfängt. Anstatt jetzt der ersten Überschrift ein zusätzliches Klassenattribut zu vergeben, könnte man einfach folgendes in der CSS-Datei notieren:

#sidebar h3:first-child {margin-top: 0;}

Das funktioniert in allen modernen Browsern und sogar im Internet Explorer ab der Version 7. Damit steht einem breiteren Einsatz dieser Pseudoklasse nichts im Wege. Möchte man diese Pseudoklasse auch dem Internet Explorer 6 beibringen, dann kann man unter anderem auf IE7 von Dean Edwards zurückgreifen.

Möchte man jetzt der letzten Überschrift ein zusätzliche Eigenschaft verpassen und/oder dem letzten Absatz einen höheren äußeren Abstand nach unten (margin-bottom) spendieren, dann könnte das ganze folgendermaßen ausschauen:

#sidebar h3:last-child  {...}
#sidebar p:last-child   {margin-bottom: 30px;}

Die Pseudoklasse :last-child wird in allen modernen Browsern, inklusive dem Internet Explorer 9, unterstützt, leider nicht im Internet Explorer 8 und kleiner. Aber auch hier könnte man auf das Script von Dean Edwards zurückgreifen, da er den kleineren Versionen von Internet Explorer einige Eigenschaften von dem Internet Explorer 9 spendiert und :last-child gehört dazu.

Weiterführende und ergänzende Quellen

:first-child auf W3C
:last-child auf W3C

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.