Kommentare 18

Hilfreiche CSS-Tipps: Die CSS Pseudoklassen-Selektoren :first-child, :last-child und :nth-child

Oft ist es nötig, bestimmte Elemente eines Eltern-Elements (z.B. einer unordered List ul oder eines Div-Elements) eine spezielle CSS-Eigenschaft zu geben. Zum Beispiel kann man so überflüssige Margin-Werte eines letzten Listenelements auf Null setzen, oder jedes zweite Element einer Liste zur besseren Übersicht mit einer anderen Farbe markieren. Um für diese Aufgabe keine extra CSS-Klassen vergeben zu müssen, kannst du stattdessen die praktischen CSS Pseudoklassen-Selektoren :first-child, :last-child und :nth-child nutzen.

1. :first-child

Mit Hilfe des Pseudo-Selektors :first-child kannst du das erste Element eines Eltern-Elements ansprechen. Zum Beispiel kannst du so das erste Listen-Element (li) in einer unordered List (ul) mit :first-child ansprechen.

Beispiel für die Verwendung von :first-child

Angenommen die Listen-Elemente einer Auflistung der neusten Blog-Artikel in deiner Sidebar haben alle folgende border-top CSS-Eigenschaft:

ul#recent-posts li {
	border-top: 1px solid #333;
}

Um dem ersten Listen-Element der Auflistung keine border-top zu geben, kannst du jetzt den :first-child Selektor nutzen und so die border-top Eigenschaft auf none setzen.

ul#recent-posts li:first-child {
	border-top: none;
}

CSS Pseudoklassen-Selektoren
Das erste Element wird ohne border-top angezeigt.

2. :last-child

Genauso wie der :first-child Selektor das erste Element innerhalb eines Eltern-Elements anspricht, kannst du mit dem CSS Pseudo-Selektor :last-child das letzte Element eines Eltern-Divs oder eines Listenelements (ul oder ol) speziell ansprechen.

Beispiel für die Verwendung von : last-child

Um dem untersten Listenelement keine untere Border mehr zu geben, kannst du die CSS-Eigenschaft border-bottom mit Hilfe des :last-child Selektors auf none setzen.

ul#recent-posts li:last-child {
	border-bottom: none;
}

CSS Pseudoklassen-Selektoren
Das letzte Element wird ohne border-bottom angezeigt.

3. :nth-child

Im ersten Moment etwas komplizierter zu verstehen als :first- und :last-child, ist der CSS3 Pseudoklassen-Selektor :nth-child. Dafür ist die Funktion im Einsatz aber auch um so praktischer.

Mit :nth-child kannst du ebenfalls bestimmte Elemente innerhalb eines Eltern-Elements ansprechen. :nth-child gibt dir aber die Möglichkeit, die Elemente nach einem bestimmten Argument aufzurufen. Zum Beispiel kannst du mit den Argumenten odd (für alle ungeraden Zahlen) und even (für alle geraden Zahlen) allen geraden oder allen ungeraden Listen-Elementen eine spezielle CSS-Eigenschaft geben.

Beispiel für die Verwendung von :nth-child mit odd und even

In einer Tabelle kannst du so jede zweiter Reihe mit einer anderen Hintergrundfarbe belegen:

tr:nth-child(odd) td {
        background: #C1B49A;
}

CSS Pseudoklassen-Selektoren
Alle Listen-Elemente mit ungeraden Zahlen haben einen farbigen Hintergrund.

Auch bei einer Reihe von gefloateten Elementen (z.B. einer Vorschau von Flickr-Bildern) kann der CSS Pseudoklassen-Selektor :nth-child sehr hilfreich sein. Denn außer den Argumenten odd und even kannst du auch noch Zahlen verwenden.

Beispiel für die Verwendung von :nth-child mit Zahlen-Werten

Möchtest du z.B. eine Flickrfoto-Vorschau in deiner Sidebar anzeigen, kannst du jedem Vorschaubild einen Margin-Wert von margin-right: 10px geben. Bei einer dreispaltigen Ansicht kannst du jetzt bei jedem dritten Bild den margin-right Wert auf 0px setzten, indem du den Wert 3n (für jedes dritte Element) nutzt.

.flickr_badge_wrapper:nth-child (3n) {
	margin-right: 0px;
}

So vermeidest du, dass die Gesamtbreite der Flickr-Vorschau zu groß für die Breite deiner Sidebar wird und das dritte Vorschaubild in eine neue Zeile verrutscht.

CSS Pseudoklassen-Selektoren
Jedes dritte Flickrbild hat den Margin-Wert margin-right: 0px; und passt so in die Sidebar-Breite.

Und der Pseudoklassen-Selektor kann sogar noch mehr. Um nicht nur jedes dritte Element innerhalb eines Eltern-Elements anzusprechen, sondern das erste Element und dann, vom ersten Element ausgehend, jedes dritte Element kannst du das Argument :nth-child (3n+1) nutzen.

Um erst dem zweiten Child-Element, und dann vom zweitem Element ausgehend jedem viertem Element einen speziellen CSS-Style zu geben, nutzt du dann also :nth-child (4n+2) usw.

Um dir das Prinzip zu verinnerlichen, gibt es bei CSS-Tricks einen tollen :nth-child Tester.

CSS Pseudoklassen-Selektoren
Mit diesem praktischen :nth-child Tester kannst du dein benötigtes nth-child Argument testen.

Eine Tabelle zur Veranschaulichung der Berechnung von nth:child Argumenten kannst du dir außerdem im Blog-Artikel “Understanding :nth-child Pseudo-class Expressions” anschauen.

4. Browser-Unterstützung

Wie du siehst lässt sich mit den prakischen CSS Pseudoklassen-Selektoren so einiges anstellen. Leider ist der Internet Explorer mal wieder eine Ausnahme, da er den :nth-child Selektor erst ab der Version 9beta unterstützt. Wenn du auf deiner Webseite bereits jQuery nutzt, kannst du die Selektoren mit Hilfe des JavaScript-Scripts Selectivizr dennoch verwenden. Das Script bietet eine Fallback-Lösung für CSS3 Pseudoklassen-Selektoren und Attribute in den Internet Explorer Versionen 6-8.

Du kannst dir das Script auf der Webseite von Selectivizr downloaden, dann lädst du es auf deinen eigenen Serverspace hoch, und rufst es mit folgendem Code innerhalb deines Head-tags auf:

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

(Beim Einfügen des Codes musst du nur noch darauf achten, dass du auf den richtigen Pfad für das Script verweist.)

Noch mehr Lesestoff zum Thema CSS Pseudoklassen-Selektoren

Natürlich gibt es neben :first-child, :last-child und :nth-child auch noch weitere praktische CSS Pseudoklassen-Selektoren. In den folgenden Artikel findest du jede Menge hilfreiche Infos und Tipps zur Nutzung.

Hast du Fragen zur Verwendung der Pseudoklassen-Selektoren, oder kennst du weitere praktische Tipps oder Tutorials zum Thema CSS Pseudoklassen-Selektoren? Über dein Feedback und deine Tipps freue ich mich sehr!

18 Kommentare

  1. Lukas

    Hallo Ellen, danke für den Artikel!

    “Wenn du auf deiner Webseite aber bereits jQuery nutzt, werden alle CSS Pseudoselektoren dank der Unterstützung durch jQuery den­noch funktionieren.”

    Muss man dazu nur jQuery im Head einfügen? Oder muss ich sonst noch irgendetwas beachten?

    Gruß
    Lukas

    • Hallo Lukas,

      vielen Dank für deinen Kommentar. Tut mir leid, dass die Beschreibung zur jQuery-Lösung für den IE gestern noch etwas ungenau war.

      Ich habe den Punkt 4 des Artikels (Thema Browser-Unterstützung) gerade noch einmal erweitert, und eine Beschreibung für den benötigten JavaScript-Code eingefügt. Ich hoffe der Tipp zum Selectivizr-Script hilft dir weiter :-)

      Viele Grüße,
      Ellen

  2. Moin,

    das war mal wieder hervorragender Lesestoff zum ersten Kaffee am Morgen. Danke dafür.

    Das löst einige konkrete Probleme, mit denen ich mich schon öfter rumschlagen musste. Kannte die Pseudo Selektoren grundsätzlich zwar, hatte mich aber noch nie näher damit beschäftigt.

    Schließe mich aber gleich der Frage von Lukas bezgl. jQuery an und befürchte, dass es ganz so einfach leider nicht sein wird ;-)

    All the best
    Michael

    • Hallo Michael,

      vielen Dank für deinen Kommentar, es freut mich sehr, dass du die CSS-Tipps so gut gebrauchen kannst. Ja, ich habe auch schon so einige etwas nervige CSS-Probleme mit Hilfe der Pseudoklassen-Selektoren lösen können :-)

      Zum Thema IE-Unterstützung habe ich den Artikel im Punkt 4 gerade noch einmal erweitert. Mit Hilfe des Scripts Selectivizr sollte sich dann auch der IE “zähmen” lassen ;-)

      Viele Grüße,
      Ellen

  3. Hallo Ellen,
    wieder mal ein sehr guter und vor allem leicht verständlicher Artikel.

    Ich will nicht besserwisserisch sein und vielleicht übersehe ich auch was, aber hat sich in deinem Beispiel-Code zu der Flickr Galerie evtl. ein kleiner Fehler eingeschlichen?

    Du schreibst dort:

    .flickr_badge_wrapper:last-child (3n) {
    margin-right: 0px;
    }

    sollte es nicht heißen:

    .flickr_badge_wrapper:nth-child (3n) {
    margin-right: 0px;
    }

    Wie auch immer, mach weiter wie bisher. Deine Artikel haben mir schon so manchen Tag erleichtert.

    Viele Grüße
    Günter

    • Hallo Günther,

      vielen Dank für dein nettes Feedback und den Hinweis zum Flickr :nth-child Code. Klar, du hast natürlich Recht, es muss :nth-child heißen. Ich habe den Code gleich verbessert.

      Ich bin übrigens immer sehr froh über Verbesserungshinweise, schließlich übersieht man doch leicht einmal etwas :-)

      Vielen Dank und viele Grüße,
      Ellen

  4. Sehr guter Artikel und einfache anschauliche Erklärungen, wie immer. ;-)

    Hätte es das schon vor einem Jahr gegeben, bzw. hätte ich damals davon gewusst, hätte ich mir sehr viel Kopfzerbrechen und jede Menge von einzigartigen CSS-Klassen sparen können.

    Vielen Dank
    Artur

    • Hallo Artur,

      vielen Dank für dein tolles Feedback zum Artikel. Ja stimmt, die CSS-Pseudoklassen sind wirklich super praktisch, und hoffentlich benötigt man irgendwann bald auch kein IE-Fallback mehr :-)

      Viele Grüße,
      Ellen

  5. Hallo Ellen,

    vielen Dank für die verständliche Beschreibung (auf Deutsch ;-).

    Ich habe jetzt folgendes Szenario: Ein Diiv mit einem oder auch mehreren Absätzen. Der letze Absatz soll auf eine bestimmte Weise formatiert werden. Was aber, wenn nun der letzte Absatz gleichzeitig der erste ist – oder anders ausgedrückt, wenn nur ein Absatz vorhanden ist?

    CSS3 bietet :only-child und :only-of-type, lässt aber noch auf sich warten. Gibt es einen eleganten Workaround für CSS2?

    Viele Grüße,
    Anke

  6. Hansi

    Hallo Ellen,

    danke für diese Tipps. Kleiner Hinweis: bei nth-child mit Zahlenwerten sieht es bei Deinem Beispiel so aus, wie wenn zwischendrin eine Leerstelle wäre. Bei mir hat es dann erst funktioniert, nachdem ich diese Leerstelle entfernt hatte.

    Gruß
    Hansi

Schreibe eine Antwort