Make nth-child work in IE

Nth-child is one of the most useful pseudo classes that CSS has but the problem is it doesn’t work in any version of Internet Explorer prior to version 9. There are still a lot of people using IE7 and IE8.

Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and advanced attribute selectors in Internet Explorer versions 6 to 8.

All you need to do is download the Selectivizr code and include it in your page like this:

<script type=”text/javascript” src=”[JS library]“></script>
<!–[if (gte IE 6)&(lte IE 8)]>
<script type=”text/javascript” src=”selectivizr.js”></script>
<noscript><link rel=”stylesheet” href=”[fallback css]” /></noscript>
<![endif]–>

The first line, where it says [JS library] refers to one of the common JavaScript libraries. If you’re not already using a JavaScript library, you’ll need to choose one of the following:

• jQuery
• dojo
• Prototype
• Yahoo
• DOMAssistant
• Mootools
• NWMatcher

And that’s it. You can now start putting advanced selectors like nth-child in your CSS and they’ll just work!