CSS – Odd Even Rows

By using CSS we can style odd/even rows without the need of any extra CSS class, JavaScript, or server-side code. :nth-child() is a CSS3 pseudo-class that helps us to do so and it is supported by almost all modern browsers.

For example:

li:nth-child(2n+0) {background:grey} /* selects every even row of a list */
li:nth-child(even) {background:grey} /* same as above */ 

li:nth-child(2n+1) {background:white} /* selects every odd row of a list */ 
li:nth-child(odd) {background:white} /* same as above */