:nth-child() Pseudo-Selektor – CSS3 Adventskalender Tag 13

Der Pseudo-Selektor :nth-child() ist sehr hilfreich, wenn man mehrere gleiche Elemente unterschiedlich gestalten möchte. Die genaue Syntax lautet E:nth-child(an + b) {}. Zudem kommen lang vermisste Keywords zum Einsatz, die für das Gestalten von Datentabellen häufig gebraucht werden: odd & even.

Ein einfaches Beispiel anhand einer Tabelle:
HTML

<table>
  <tr>
    <td>eins</td><td>zwei</td>
  </tr>
  <tr>
    <td>drei</td><td>vier</td>
  </tr>
  <tr>
    <td>fünf</td><td>sechs</td>
  </tr>
</table>

CSS

tr:nth-child(odd) {background-color: #ccc}
tr:nth-child(even) {background-color: #ddd}

Screenshot

In diesem typischen Beispiel musste man bisher jede 2. Tabellen-Zeilen (dynamisch generiert) mit einer Klasse versehen um diese Zeilen dann anders zu stylen. Durch den Pseudo-Selektor :nth-child(even) wird das bald nicht mehr nötig. Es wird also jede 2. Zeile mit der Hintergrundfarbe #ddd eingefärbt.

Das gleiche Ergebnis erreicht man mit tr:nth-child(2n) {background-color: #ddd} – hier mal rot gefärbt (tr:nth-child(2n) {background-color: red}):

Jede 3. Zeile beginnend ab der 4. Zeile mit der Hintergrundfarbe rot

CSS

tr:nth-child(3n+4) {background-color: red}

Layout einer News-Seite mit 4 Spalten und 2 Top-News:

CSS

/* News als Listeneinträge */
ul {
  list-style: none;
}
li {
  border: 2px solid black;
  float:left;
  height: 300px;
  padding:0;
  margin: 10px;
  width: 200px;
}
li:nth-child(1), li:nth-child(2) {height: 250px; width: 424px}
li:nth-child(4n+3) {clear: left}

Alle Listen-Elemente werden grundsätzlich erstmal gleich gestaltet. Dann wird die Breite und Höhe des erste und zweite Element verändert – den Top-News wird mehr Platz eingeräumt. Zusätzlich wird jedes vierte Element beginnend ab Element 3 gecleart.

Demo

Demo-Datei zum Pseudo-Selektor :nth-child() aufrufen

Browser-Support:

Safari 3.1+, Chrome 2+, Firefox 3.5+, Opera 9.5+ und IE9beta.

Am Tag 14 geht es im Webstandard-Blog weiter.