WordPress & Webwork

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

4 Reaktion(en)

  1. Jens Grochtdreis

    Und wenn man ein Javascipt-Framework wie jQuery nutzt kann man für die Browserimitate aus Redmond die Elemente mittels des Frameworks selektieren und passend stylen. Das dürfte platzsparender sein, als das Skript von Dean Edwards zu nutzen.

  2. bazz

    Cooler Tipp! Das ist das schöne an CSS, auch wenn man schon ewig damit arbeitet, lernt man immer mal wider etwas neues dazu.

    Ist mir aber bisher auch noch nicht in irgendeinem Fremd CSS aufgefallen.

Die Kommentare in diesem Beitrag sind geschlossen.

✉ WordPress-Newsletter ✉

Tipps und News als E-Mail in deinem Postfach? Dann abonniere einfach den ersten deutsch­sprachigen Word­Press-Newsletter:


Der Newsletter ist hinterher jederzeit abbestellbar.

Eintragen!