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

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
– Metauser, Commented Mar 20, 2013 at 14:33
Everybody is ignoring my question focused on the easy answer. Please tell me if there is no CSS2 solution! ;) — Metauser
– Metauser, Commented Mar 20, 2013 at 14:38

dsgriffin · Accepted Answer · 2013-03-20 15:17:15Z

10

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.

answered Mar 20, 2013 at 14:25

dsgriffin

68.8k17 gold badges141 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John Conde · Accepted Answer · 2013-03-20 14:25:06Z

4

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

or

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

answered Mar 20, 2013 at 14:25

John Conde

220k100 gold badges464 silver badges504 bronze badges

Please indicate whether this is CSS3 or CSS2.

nth-child is a CSS3 selector