CSS3 und Firefox 3.1 Beta

Abwechselnd Zeilen in einer Tabelle unterschiedlich farbig hinterlegen "Zebrastreifen"). Wie geht das nur mit CSS? CSS3! Mit der Pseudo-Klasse :nth-child!

Mit :first-child, :last-child und :nth-child können spezielle Elemente abhängig von der Anzahl ihrer Geschwister angesprochen werden. Zum Beispiel können alle gerade Zeilen einer Tabelle per

:nth-child(even) {background-color: #ccc;}

und alle ungeraden Zeilen per

:nth-child(odd) {background-color: #fff;}

eingefärbt werden.

Leider sind die meisten Browser noch nicht soweit, CSS3 zu unterstützen. So habe ich mir den Firefox 3.1 Beta heruntergeladen, um mir das mal ansehen zu können. Fantastisches Teil - auch wenn meine Firefox-Erweiterungen noch nicht alle mitmachen. Kann ich nur empfehlen.

Vorgeschmack, wenn CSS3 dann implementiert ist:

Erste Zeile

Zweite Zeile

Dritte Zeile