Kategorien
CSS Layout & Styles

:nth-of-type Pseudo-Klasse macht Tabellen-Zeilen Highlighting einfach

Das abwechselnd farbliche Absetzen von Tabellenzeilen in HTML kann auch mittels einer CSS 3 Pseudo Klasse umgesetzt werden.

/* heighlight jeder 2ten zeile beginnend mit der ersten */
tr:nth-of-type(2n+1) { background-color:#f7f7f7; }

/* heighlight jeder 2ten zeile beginnend mit der zweiten */
tr:nth-of-type(2n) { background-color:#f7f7f7; }

Der InternetExplorer weigert sich leider bis dato diese CSS 3 Angaben zu interpretieren.

Mehr Informationen zu CSS 3 Selektoren liefert der W3C