in Tutorials

Use jQuery to Mimic nth-child Behavior in IE8

Nth-child pseudo-selectors are a cool way to supercharge your CSS. They do a great job of styling a group of elements that need slight changes based on their order. A popular example of this is a grid system, or any similar list of items.

This works great in modern browsers, but if you are developing sites that need to be compatible with IE8 and below, you’ll find that :nth-child does not work.

You can use an alternate method to :nth-child by explicitly chaining elements together with the ‘+’ selector. This will select adjacent siblings. However, this method does not scale well and will likely break if your list is dynamic. Below is an example:

 ul > li:first-child + li + li { color: red; } /* find the 3rd list item and color it red */ 

 

Instead, use conditional comments in your HTML and leverage jQuery to add IE specific selectors in your CSS to recreate nth-child rules.

 


<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="css/ie-style.css">
    <script src="scripts/vendor/jquery.min.js"></script>
    <script src="scripts/nth-child-fixer.js"></script>
<![endif]-->

For example, if you have the following statements in your stylesheet:

 

.article { position: relative; border: 2px solid lightgray; margin: .5em; }
.article:nth-child(n) { float: left; width: 23%; }
.article:nth-child(1n) { margin-left: 0; }
.article:nth-child(3n) { border: 2px dashed red; }
.article:nth-child(4n) { margin-right: 0; }

 

Older versions of IE will not know how to interpret those pseudo-selectors so they will be ignored. But, you can ‘listen’ for these elements in jQuery and use the addClass method to add additional classes to those elements.

 


$(function(){ // DOM ready, go!

    $(".article:nth-child(n)").addClass("article-nth-child-n");
    $(".article:nth-child(1n)").addClass("article-nth-child-1n");

    $(".article:nth-child(3n)").addClass("article-nth-child-3n");
    $(".article:nth-child(4n)").addClass("article-nth-child-4n");

})

 

And the ie-style.css file would have the following rules:

 


.article-nth-child-n { float: left; width: 23%; }
.article-nth-child-1n { margin-left: 0; }
.article-nth-child-3n { border: 2px dashed red; }
.article-nth-child-4n { margin-right: 0; }

 

With the following setup, additional files (jQuery library, nth-child-fixer.js, and ie-style.css) will only be loaded if needed thanks to the conditional comment.

Note: It wouldn’t be a good idea to use this method if it’s the only reason you need jQuery. The library is fairly large and will slow down pageload speed in IE. So only use this method if you are using jQuery elsewhere on the site. It is too big of a load hit for just one small purpose.

Please let me know if you have suggestions or other examples that are more up to date. This method works, but is a bit antiquated ( from 2012). It also gets cumbersome to manage if you have a lot of elements on your site with different class names that need specific n-th child selectors. Managing all those rules with JavaScript can get bloated.

Demo: A working demo of this example can be found here  http://johnstonianera.com/demos/nthChild/. Try loading it in a modern browser (Chrome, Firefox, Safari) and then load it in IE 8 or below to see how the conditional statement loads jQuery, the subsequent JavaScript file, and the IE-specific stylesheet.

Download Example: Here is a  zip file containing all example files for this article. Feel free to reuse for your needs

All code is free to use as you see fit. No licensing here.

Leave a Reply