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.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s