Alternate row colors with pure CSS3

CSS3 is here. All the modern browsers support it, even the infamous Internet Explorer in its 9th version. In this small article we will learn how to alternate row colors in a table, or any other HTML element with pure CSS3. The best part is that you will be able to do it in just 2 lines. No more PHP hacks or JavaScript chunky chunks.

I know I posted a few months ago a way to alternate row colors with PHP (which is kinda nice), but lets be honest, mixing CSS + PHP is not as beautiful as pure CSS. If you might want to check that article if CSS3 is not an option for you.

Enough jibber jabber, lets take a look at the code:

tr:nth-child(odd) { background:#000; }
tr:nth-child(even) { background:#333; }

That would do it for a table. Lets see how to do it on a list element:

ul > li:nth-child(odd) { background-color:#eee; }
ul > li:nth-child(even) { background-color:#fff; }

Magic isn’t it? I will make sure to post any other cool CSS3 solutions whenever I find them around.

Have fun!

Cool stuff: The new Google Chrome logo made only with CSS3.