:nth-child is not working in IE

Question

Ive searched for my specific problem and can\'t find it... I hope any of you guys can help.

Im trying to get nth-child to work in IE - now Ive read that you can do i

Answer 1

There are various ways to use jQuery with :nth-child pseudo-selector:

$('dt:nth-child(odd)') // gets every odd-numbered dt
$('dt:nth-child(even)') // gets every even-numbered dt
$('dt:nth-child(3n)') // gets every third dt

---

Edited in response to @Unihost's question (in comments, below):

How do I create and link this jquery file... Just like any normal .js file?

Absolutely, the only thing to remember is that you're presumably using the jQuery to apply css, so I'd suggest using it in the following manner:

$('dt:nth-child(odd)').addClass('oddDts');
$('dt:nth-child(even)').addClass('evenDts');

And then add the following (as a demo) to your css:

dt:nth-child(odd), /* for useful 'modern' broswers that understand */
dt.oddDts {        /* referencing the class applied with IE-specific jQuery file */
    background-color: #ffa;
}
dt:nth-child(even), /* for useful 'modern' broswers that understand */
dt.evenDts {        /* referencing the class applied with IE-specific jQuery file */
    background-color: #f00;
}

I'd strongly advise not attempting to apply all the relevant styles with jQuery, otherwise it gets very unwieldy very quickly. Plus, this way, you can use the nth-child() pseudo-selectors in your regular CSS and include the jQuery only for IE:

<!--[if ie]>
    <script src="path/to/jsFile.js" type="text/javascript"></script>
<![end if]-->

Incidentally, there's a JS Fiddle demo of intent, if you'd like to see how it might work.

Answer 2

IE doesn't support :nth-child. Use jQuery with the regular CSS selector, e.g.:

$('dl dt:nth-child(2n)') // gets every 2nd dt