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?

Beagle

Answer 1

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

Nicholenicholl

Curiously, IE9.js allegedly enables :nth-child() support, but it does not work in practice. – Bookcase

@Nicholenicholl I used selectvizr.js but it is not working if i have two table on one page. It works for one table but not other – Beagle

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.

Singultus

This works for my second row, but what if I have multiple divs in rows and I want to color every other one, no matter the number of them? – Sik

@Sik As i said earlier this hack cannot emulate complex selectors for IE8 i.e Doesn't support nth-child(2n+1) or nth-child(odd). – Singultus

Since the '+' selector is additive, you can emulate ':nth-child' to an arbitrary number of items above by adding '+ li' for each extra item, so 'li:nth-child(4)' becomes 'li:first-child + li + li + li' – Sternum

@Sternum Agree with you when you want to target single odd / even child. But when you want to write this for each child explicitly in our stylesheet that would be tough, impractical to target each rows with li + li + ... n. – Singultus

@SamarPanda. AS you said, there IS no way to emulate the process for an arbitrary number, which is why the special formats were invented. Rock and a hard case here. The OP will have to live with it. – Sternum

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;
}

Tenterhook

To add to this, you can use conditional comments to place an oldIE class on body and then only execute that jQuery snippet if that class is present. – Kersey

Also worth noting, IE7 and IE8 will ignore a statement which includes unsupported pseudo-classes (such as the one above). To get around it, you need to re-declare things separately. #21857042 – Neoptolemus

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!

Sternum

Not quite. tr:nth-child(4) would be equivalent to *:first-child + * + * + tr. – Pullulate

@MarnenLaibow-Koser. If, as stated, the elements are the same tag name, why is there a need to make the last tr? – Sternum

Can you rephrase your question? I'm not sure I understand what you're getting at. – Pullulate

@MarnenLaibow-Koser. Why is a starting * instead of a tr, and a final tr instead of a *, better, especially when the condition was that they were all trs anyway? – Sternum

@MarnenLaibow-Koser. Only one needs to be a tr to ensure the rule applies, so any version with at least one tr is equivalent. Basically, the first one is the best to specify explicitly, as the rule engine can have the opportunity to reject the rule applying to any particular instance early on. – Sternum

@MarnenLaibow-Koser. For example, the rule as you have written it will be tested against any li elements in a list, a bunch of ps on a page, and it will have to get to the fourth element to eventually fail it. Put the most restrictive test first, which forces failure on the first element for each sequence that doesn't start with a tr. – Sternum

"Why is a starting * instead of a tr, and a final tr instead of a *, better" • Because that is actually how the :nth-child pseudoclass works: it refers to the nth child of its parent regardless of the children's types. tr:nth-child(4) doesn't mean the 4th tr child; it means the 4th child, if it's of type tr. – Pullulate

"Put the most restrictive test first" • First of all, in this example, I'm worried about correctness, not efficiency. Second, "first" doesn't mean "left". The CSS spec doesn't require left-to-right selector evaluation, and apparently most browsers evaluate CSS selectors from right to left: see #5797514 . – Pullulate

In this particular case, the difference between specifying the tr tag name and using * would be minimal, because tr elements occur only in contexts where no other element is valid. But if you're going to use a selector, it's important to understand what it actually means... – Pullulate

@MarnenLaibow-Koser. I realise you are examining this is absolute terms, but I am dealing with equivalences in results, not pedantically exact, if it doesn't make any difference, which is what my caveat (all tr) basically did. However, if indeed browsers do evaluate RTL, then an explicit last is the best (I have seen a lot of opinions, though not an explicit reference to a sentence in a browser spec that states RTL exclusively. Boris Zbarsky seems to indicate that there is quite a mixture in groups.google.com/forum/#!topic/mozilla.dev.tech.layout/…). – Sternum