nth-child() Pseudo-Selektor – CSS3

Achtung: Diese Seite ist nur noch Teil eines Archivs und wird in Zukunft entfernt.

Mit CSS3 gibt es neben :first-child und :last-child nun auch endlich die Möglichkeit, nicht nur das erste oder letzte von mehreren gleichen Elementen anzusprechen, sondern jedes beliebige. Der entsprechende Befehl dazu heißt :nth-child(). In die Klammern kann man verschiedene Werte eintragen:
Zahlen bedeuten ganz normal die Zahl des Elements. Hat man 5 gleiche Elemente und möchte nun das 4. davon ansprechen, nutzt man :nth-child(4). Das ist die einfachste Möglichkeit.
Als nächstes gibt es :nth-child(odd) und :nth-child(even). Hierbei wechseln sich die angesprochenen Elemente immer ab. Im Beispiel also werden die Elemente Nummer 1, 3 und 5 von :nth-child(odd), die Element 2 und 4 mit :nth-child(even) angesprochen. Somit kann jedes zweite Element angesprochen werden, was aber auch anders geht.
So kann man mit :nth-child(Xn) jedes Element ansprechen. :nth-child(2n) spricht z.B. jedes zweite Element an, :nth-child(3n) jedes dritte usw. Möchte man nun aber ab dem dritten Element jedes zweite ansprechen, so funktioniert das mit :nth-child(2n+3). Das +3 hinter dem 2n zeigt somit an, bei welchem Element gestartet werden soll.

Die genaue Syntax für diesen Pseudo-Selektor heißt: E:nth-child(an + b) sowie odd und even.

Ein einfaches Beispiel: Die index.html:

HTML-Quellcode

  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="css.css" type="text/css" media="screen" />
  4. </head>
  5. <body>
  6. <ul>
  7. <li>&nbsp;</li>
  8. <li>&nbsp;</li>
  9. <li>&nbsp;</li>
  10. <li>&nbsp;</li>
  11. <li>&nbsp;</li>
  12. <li>&nbsp;</li>
  13. <li>&nbsp;</li>
  14. <li>&nbsp;</li>
  15. <li>&nbsp;</li>
  16. <li>&nbsp;</li>
  17. <li>&nbsp;</li>
  18. </ul>
  19. </body>
  20. </html>
Alles anzeigen
Die css.css:

CSS-Quellcode

  1. ul {
  2. list-style: none;
  3. }
  4. li {
  5. border: 1px solid #000;
  6. height: 250px;
  7. width: 101px;
  8. margin: 10px;
  9. float: left;
  10. }
  11. li:nth-child(1), li:nth-child(2) {
  12. height: 150px;
  13. width: 225px;
  14. }
  15. li:nth-child(4n+3) {
  16. clear: left;
  17. }
  18. li:nth-child(11) {
  19. width: 470px;
  20. }
Alles anzeigen
Ergibt folgendes Bild:


Ich hoffe, mit diesem Artikel den neuen Pseudo-Selektor nutzvoll erklärt zu haben. Bei weiteren Fragen stehe ich natürlich gerne zur Verfügung.
Über den Autor
Ich bin Webentwickler in Stuttgart und administriere Server seit vielen Jahren. In diesem Blog erstelle ich hauptsächlich Tutorials für andere Webentwickler, Webdesigner und Serveradministratoren.
-------------------------------------------------------------------------------------------------------------------------------------
I’m a web developer in Stuttgart, Germany, and server administrator since many years. This blog mainly contains a tutorial set for other web developer, web designer and server administrators.

1.046 mal gelesen

Kommentare 2

  • Black Rider -

    Mit CSS kann man gar keine Inhalte generieren. Hier müsstest du per JavaScript diese Zahlen generieren lassen und dann in eine CSS-Datei mit der oben genannten Syntax schreiben.

  • Mike -

    Kann man damit auch Zufallszahlen per CSS generieren?