How to make Internet Explorer 8 to support nth child() CSS element?

Question

I want to give a zebra stripe effect to my table rows. In all other browsers it can be done using CSS nth child element. But i want to do it IE 8 also. SO how can i do it?

Answer 1

You can use http://selectivizr.com/ JS which support css3 selector for IE.

Answer 2

With polyfill : Selectivizr is good enough.

Without polyfill: As IE8 supports first-child you can trick this to support nth-child in iE8 i.e

/*li:nth-child(2)*/
li:first-child + li {}/*Works for IE8*/

Although we cannot emulate complex selectors i.e nth-child(2n+1) or nth-child(odd) for IE8.

Answer 3

As an alternative to Selectivizr, you can use a little jQuery:

$('.your-list li:nth-child(3n+1)').addClass('nth-child-3np1');

Then just add a second selector in your CSS:

:nth-child(3n+1)
{
    clear: both;
}

.nth-child-3np1
{
    clear: both;
}

Answer 4

The 'first-child' and '+' selectors are both available in IE7, and the '+' is additive.

Therefore 'nth-child' can be simulated by successively adding '+' selectors, so:

tr:nth-child(4)

becomes:

tr:first-child + tr + tr + tr

If all sibling elements are the same, then the '*' wildcard will suffice, as in:

tr:first-child + * + * + *

which will reduce the css file size if specifying lots of rows.

Note that spaces between selectors are not required, so the file size can be reduced further by leaving them out, so to select the 1st, 3rd and 5th rows:

tr:first-child,tr:first-child+*+*,tr:first-child+*+*+*+*

Of course one would not want to cater for very large tables!

If using the * as a filler, make sure the :first-child element and the last element is given the explicit tagname, because the rule will be tested against every element in the DOM, and specifying both those elements explicitly forces failure at whichever end a particular browser applies its rules to first, rather than failing after it has had to step over several elements in every sequence to eventually fail the rule for each of them. Don't make your browser work for no good reason!