CSS Even & Odd Rules

CSS has lots of options to make our life easy, today I noticed there is one more awesome selector which we can use to target “even” or “odd” rows of our tables or listing being created using “li” tags. I just tested it in latest versions of IE, Chrome & FF and it seems working perfect in all of them.

Here is code reference:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Source: http://www.w3.org/Style/Examples/007/evenodd.en.html

Enjoy! Let me know if you need further help.

Advertisements