CSS pseudo-class fallback?

Question

I'd like to use the tr:nth-child(even/odd) pseudo class for a table, but I want to support the IE 2 population as well. So, is there any purely css way to add a border to tr if nth-child isn't supported?

Answer 1

You can try Selectivizr , I think that's the easiest solution.

EDIT:

You could also use jquery to add classes for you:

$(function() {
    $("tr:odd").addClass("odd");
    $("tr:even").addClass("even");
});

EDIT2:

Also, if you're using Modernizr, you could try this .

EDIT3 :)

tr { border-bottom: 1px solid #ccc; }

tr:nth-child(odd),
tr:nth-child(even) { border: none; }

tr:nth-child(odd) { background: #eee; }

tr:nth-child(even) { background: #ddd; }

Answer 2

You could add + between your classes/elements to do like in this example below, every 5 <tr> remove the margin-right

tr{margin-right:10px;}
tr + tr + tr + tr + tr{margin-right:0;}

A great replacement for NTH pseudo-classes without any javascript and IE7+ compatible ;)