WordPress & Webwork - perun.net

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

am 03. 03. 2011 um 14:15 Uhr

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

Diesen Artikel weiterempfehlen:

Premium WordPress Themes

Verwandte Artikel:

Kategorien:
HTML & CSS
Tags:
,  
Beitrag:
Trackback-Adresse und die Druckvorschau
Kommentare:
Kommentare verfolgen oder Kommentar abgeben

 — 

4 Kommentare »»

  1. 1. – Jens Grochtdreis

    Kommentar vom 03. March 2011 um 14:19

    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. 2. – bazz

    Kommentar vom 03. March 2011 um 14:25

    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.

  3. 3. – ralphs

    Kommentar vom 03. March 2011 um 16:20

    Typisch MS: first bereits im IE 7 einbauen, last aber vergessen. ;-) Schade!

  4. 4. – Fabian Tempel

    Kommentar vom 23. May 2011 um 17:40

    :first-child funktioniert im IE7 aber nur wenn kein Kommentar vor dem jeweils ersten Element im Markup steht.

Hinweis:
250+ Professionelle WordPress-Themes
Premium WordPress-Themes, 24 davon mit deutschem Support

Einen Kommentar hinterlassen




XHTML (folgende Tags sind erlaubt): <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . Kommentar-Vorschau ist aktiviert (Javascript wird benötigt).

Code-Beispiele: damit die Code-Beispiele richtig angezeigt werden müssen die Sonderzeichen maskiert werden (z. B. < zu &lt;).

Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.