Various CSS styles on odd and even lines

Question

Is it possible, using only CSS, to set different styles for odd and even rows for a dynamically created table, without setting the right style for each row when I repeat the collection?

Answer 1

I'm not sure if this will work in a cross browser, I would prefer jQuery itself, but css-only should do the trick:

tr:nth-child(even) { ... }
tr:nth-child(odd) { ... }

Answer 2

You can use the nth-child http://reference.sitepoint.com/css/pseudoclass-nthchild selector , although it is not supported by all browsers.

jquery, ?

Answer 3

You can do this with CSS3.

tr:nth-child(2n+1) /* targets all odd rows */
tr:nth-child(2n) /* targets all even rows */

Answer 4

you can just use jquery and add a class for odd lines like

$("tr:nth-child(odd)").addClass("odd");

and create it using css as

.odd{background-color:#657383}