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:
Alles anzeigen
Die css.css:
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.
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
- <html>
- <head>
- <link rel="stylesheet" href="css.css" type="text/css" media="screen" />
- </head>
- <body>
- <ul>
- <li> </li>
- <li> </li>
- <li> </li>
- <li> </li>
- <li> </li>
- <li> </li>
- <li> </li>
- <li> </li>
- <li> </li>
- <li> </li>
- <li> </li>
- </ul>
- </body>
- </html>
CSS-Quellcode
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.
1.046 mal gelesen
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.