Making Zebra Stripes with CSS3

Rogem — Fri, 30 Oct 2009 22:01:35 +0000

Zebra Stripping is the technique of having different colours per each line on a list. It generally is considered to help users read large tables of information; however there is evidence suggesting the effectiveness of zebra stripes is somewhat overrated. Having said that, in CSS3 it’s very easy to implement so it’s worthwhile adding.

To add Zebra Strips to a list, all you need to do is adding the following pseudo-class to the end of the CSS element you wish to edit:

ul#example_list li:nth-child(odd) {
 background-color:#FFF;
}

In this example, I’ve used an unordered list element. The data in the brackets refers to the “nth” number to affect, for example putting “(even)” will affect every even

. You can also put number in, for example “(3)” would affect every 3rd

Below is a link to a working example of the code in action (Feel free to copy & share).

If you want to read a bit more about the nth-child pseudo-class I recommend the sitepoint CSS reference.

Full On Design » Nth Number

Making Zebra Stripes with CSS3