Making Zebra Stripes with CSS3
About the Author
Mike Rogers is a Web Developer who is currently at University studying Web Technologies. He also is the founder of Full On Design. He has several years experience freelancing and you can follow him on Twitter (Rogem002).
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 <li>. You can also put number in, for example “(3)” would affect every 3rd <li>.
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.