How do I select every other row in an HTML table using CSS2, not CSS3?

Question

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.

This question is not a duplicate of that, even though the answer fits nicely. If someone searches for the more general question they won't be confused by the topic of color. Its unreasonable to suggest that because an answer to another *different* question is the appropriate answer, that this means *duplicate*. Duplicate question/answers are OK in my book. I have seen entirely different quality question/answer sets that should in theory completely overlap, but they don't. Specifically here someone should state that there is no CSS2 solution, which I am seeking. — Metauser, Mar 20 '13 at 14:33
Everybody is ignoring my question focused on the easy answer. Please tell me if there is no CSS2 solution! ;) — Metauser, Mar 20 '13 at 14:38

dsgriffin · Accepted Answer · 2013-03-20T15:17:15.363

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.

score 4 · Answer 2 · answered Mar 20 '13 at 14:25

4

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

or

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

answered Mar 20 '13 at 14:25

John Conde

2 Answers2