wickedways.org :: web standards all around

Zebra lists

Here's a drop-in way to have alternating background colors on the li elements in an unordered list. (Actually, you aren't limited to alternating background colors; the script just applies the odd class to odd-numbered li elements, so you can apply any number of CSS properties to them.)

This is an extension of a technique that I first saw in David Miller's Zebra Tables at ALA, where the goal was to create alternating background colors for table rows.

The target of this technique is unordered lists instead of table rows, and my javascript is a bit shorter (10 lines including comments), but the end result is the same.

A zebra list in action

The code

To use this, just apply the zebra class to the ul that you want striped and link to the supplied javascript.