WordPress & Webwork

CSS3: Pseudoklasse :nth-child()

CSS3 bringt einige neue und interessante Sachen mit sich, so auch die Pseudoklasse :nth-child(), damit kann man jedes x-te Element eines bestimmten Elternelements ansprechen … nicht verstanden? OK, hier ein Beispiel. Nehmen wir mal an, du möchtest bei Tabellen erreichen, dass jede zweite Tabellenzeile einen anderen Hintergrund bekommt:

tr:nth-child(2n) {background: #eee;}

das würde folgende Auswirkung haben:

Die Auswirkungen von :nth-child() visualisieren

Den :nth-child-Visual-Calculator habe ich drüben bei Jens entdeckt. Damit kann man sehr gut die Auswirkungen der verschiedenen Werte von :nth-child() sichtbar machen. Der Wert 2n spricht jedes zweite Element an, wobei die Zählung bei 0 anfängt. Dagegen spricht 2n+1 schon das erste Element an und ab da dann jedes zweite.

Man kann auch hierbei auf Schlüsselwörter zurückgreifen, der Wert even entspricht 2n und odd entspricht 2n+1. Der Wert 3n spricht jedes dritte Element an und setzt man als Wert 4 ein, dann wird nur das vierte Element angesprochen.

WordPress-Schulungs­unter­lagen

Anleitung für Autoren und Redakteure
Schneller und unkomplizierter Einstieg in die redaktionelle Betreuung einer WordPress-Installation.

Handbuch für Administratoren
Schneller und unkomplizierter Einstieg in die technische Betreuung einer WordPress-Installation.

Anschauen