Pseudo-Selektor :nth-child()

Der Pseudo-Selektor :nth-child() ist sehr hilfreich, wenn man gleiche Elemente verschieden aussehen lassen 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.

 

 

Definition in css

div.nthchild tr:nth-child(odd) {
background-color:#44B4DD;
color:#000;
}

div.nthchild tr:nth-child(even) {
color:#44B4DD;
background-color:#000;
}

Und so schaut´s aus

CSS-Lernen CSS-Lernen
CSS-Lernen CSS-Lernen
CSS-Lernen CSS-Lernen

Möchte man nur jede 2te Zeile einer Ziele ansprechen, dann:

Definition in css

tr:nth-child(2n) {
color: #44B4DD;
background-color: #fff;
}

Markierung jeder 2ten Zeile ab der 4ten Zeile:

Definition in css

tr:nth-child(2n+4) {
color: #fff;
background-color: #44B4DD;
}