Zur Erhöhung der Übersichtlichkeit lassen sich alternierende Hintergrundfarben für Tabellenzeilen, Listenelemente etc. einsetzen. Dieser Artikel beschreibt die Problematik der Umsetzung im Markup und stellt die Umsetzung per CSS vor; für IE per CSS-Expression.
Zur alternierenden Färbung könnte an Elemente mit gerader (oder ungerader; beides ist nicht notwendig) Nummer eine Klasse vergeben werden:
<table>
<tbody>
<tr> <th>1</th> <td>eins</td> </tr>
<tr class="even"> <th>2</th> <td>zwei</td> </tr>
<tr> <th>3</th> <td>drei</td> </tr>
<tr class="even"> <th>4</th> <td>vier</td> </tr>
<tr> <th>5</th> <td>fünf</td> </tr>
<tr class="even"> <th>6</th> <td>sechs</td> </tr>
<tr> <th>7</th> <td>sieben</td> </tr>
</tbody>
</table>
Im Stylesheet:
tr { background-color: #FCC }
tr.even { background-color: #CCF }
Dies hat jedoch den Nachteil, dass bei Änderungen (Hinzufügen oder Entfernen von Elementen) die Klassen neu vergeben werden müssen, wenn sie nicht durch ein serverseitiges Script generiert werden.
CSS 3 bietet mit der Pseudoklasse :nth-child [CSS3-SELECTORS] die Möglichkeit, dieses Styling auch ohne zusätzliches Markup zu realisieren.
<table>
<tbody>
<tr> <th>1</th> <td>eins</td> </tr>
<tr> <th>2</th> <td>zwei</td> </tr>
<tr> <th>3</th> <td>drei</td> </tr>
<tr> <th>4</th> <td>vier</td> </tr>
<tr> <th>5</th> <td>fünf</td> </tr>
<tr> <th>6</th> <td>sechs</td> </tr>
<tr> <th>7</th> <td>sieben</td> </tr>
</tbody>
</table>
Im Stylesheet:
tr:nth-child(odd) { background-color: #FCC }
tr:nth-child(even) { background-color: #CCF }
Nicht nur Wiederholungen aller 2 Elemente sind möglich, sondern aller a Elemente. Beispiel für a = 3:
tr:nth-child(3n) { background-color: #CCF }
tr:nth-child(3n+1) { background-color: #FCC }
tr:nth-child(3n+2) { background-color: #CFC }
:nth-child wird von den aktuellen Versionen aller großen Browser mit Ausnahme des Internet Explorers unterstützt.
Im Internet Explorer lässt sich dies mit CSS-Expressions realisieren. [Bittersmann] Der IE 8 ist dazu im 7er Modus zu betreiben. [Sebestyen]
Im einfachen Fall, wenn nur gerade/ungerade unterschieden werden muss, wird dem jeweiligen Elementobjekt eine Eigenschaft elem.isEven mit dem negierten Wert des Vorgängers (sofern vorhanden) gegeben. Anhand dessen, ob dies als true oder false ausgewertet wird, wird der CSS-Eigenschaft der eine oder der andere Wert zugewiesen.
tr
{
background-color: expression( (new Function('elem', '\
elem.style.backgroundColor = (elem.isEven = elem.previousSibling && !elem.previousSibling.isEven) ? "#FCC" : "#CCF";\
'))(this) );
}
Im allgemeinen Fall werden die a Werte für die CSS-Eigenschaft in einem Array elem.val abgelegt. Das jeweilige Elementobjekt erhält eine Eigenschaft elem.mod, deren Wert aus dem entsprechenden Wert seines Vorgängers (sofern vorhanden) berechnet wird und die Elemente von 0 bis a − 1 zyklisch durchzählt. Dieser Wert dient als Index, um aus dem Array den jeweiligen Wert für die CSS-Eigenschaft auszulesen.
tr
{
background-color: expression( (new Function('elem', '\
elem.val = ["#CCF", "#FCC", "#CFC"];\
elem.mod = elem.previousSibling && elem.previousSibling.mod + 1 < elem.val.length ? elem.previousSibling.mod + 1 : 0;\
elem.style.backgroundColor = elem.val[elem.mod];\
'))(this) );
}