How Do I Select Every Other Row In An Html Table Using *css2*, Not Css3?

How do I select every other row in an HTML table using CSS2? If that is not possible, an answer for CSS3 is welcome as well.

Solution 1:

Sadly there is no solution purely using CSS2.

You can, however, use :odd and :even selectors in CSS3 to determine every row.

tr:nth-child(even) {
   // if it's even - rows 2,4,6 etc - apply styles
}

tr:nth-child(odd) {
   // if it's odd - rows 1,3,5 etc - apply styles
}

nth-child even/odd is supported in all major browsers, but not in IE8 and before.

If you want a way to make it work for IE8 and earlier, then check out this article on making nth-child work everywhere.

Solution 2:

tr:nth-child(even) {
   /* stub */
}

or

tr:nth-child(odd) {
   /* stub */
}

See here for browser support