Skip to content

Hack: how to enable :first-child in IE6

How to implement the CSS selector :first-child in IE6 with a little help from Javascript.

UPDATE: The pure Javascript routine is updated. It is now as fast as jQuery.

One of the things I most dearly miss in IE6 is the lack of support for the CSS selector :first-child. Some shortcomings in browsers can be patched with Javascript. And :first-child is one of them for sure. If you use a Javascript library like jQuery or Prototype it’s just one line of Javascript:

<!--[if lte IE 6]>
    <script type="text/javascript">
        jQuery("*:first-child").addClass("firstChild")
    </script>
<![endif]-->

If you don’t like Javascript libraries you can use this pure js-code:

var tags = document.getElementsByTagName("*");
var nTags = tags.length;
for (var i=0; i < nTags; i++) {
	if (tags[i].firstChild) {
		var el=tags[i].firstChild;
		while ((el.nodeType!=1) && (el.nextSibling)) {
			el=el.nextSibling;
		}
		if (el.nodeType==1) {
			el.className += " firstChild";
		}
	}
}

Now every first child has the class firstChild that can be used in CSS selectors. You’ll get something like this:

ul li:first-child,
ul li.firstChild {
    font-weight: bold;
}

The speed

Throwing around classes through the whole HTML tree is not without a price. Certainly not if you keep in mind that Javascript in IE6 is much slower than in Firefox or Safari. So I tested what would happen if the Javascript would run in the homepage of amazon.com, a page with almost a 1000 tags. Here are the results:

  • Adding firstChild with jQuery:
    • Amazon.com homepage (1000 tags): +- 215milliseconds
    • Five times the Amazon.com homepage (5000 tags): +- 742 milliseconds
  • Adding firstChild with plain Javascript:
    • Amazon.com homepage (1000 tags): +- 129 milliseconds
    • Five times the Amazon.com homepage (5000 tags): +- 798 milliseconds

As you can see there is not much performance difference. Especially when you keep in mind that every time I ran my test page I got different results. With a page of 5000 tags it could run as fast as 481 milliseconds or as slow as 931.

Code crafting

The first test I did with the pure Javascript code gave different results because of a inefficient routine. It ran about 1/3 slower in the 1000-tag page and 4 times slower in a 5000-tag page. After consulting a colleague I was able to find a more efficient routine that could match with jQuery.

Conclusion

I think a lag of about 200 milliseconds during a page load with a 1000 tags can be acceptable. Especially since a web page of 1000 tags is already a large website to my standards. Most websites I develop have about 300 tags a page at best. If you want to use this hack, I guess it’s best to test the script in the largest pages of the website. The gain isn’t that spectacular: just support for :first-child. But on the other side it could really make your life as a web developer just a bit easier.

You might be tempted to patch other shortcomings of IE6 with Javascript. Don’t start coding, but consider the IE7.js-script. But I must say up front that I don’t have good experiences with it. The script works good in small pages with small CSS files, but you’ll experience serious performance issues with medium or large websites.

Putting it in perspective

Chrome 4, by the way needed just 37 milliseconds to run the Javascript in the 5000-tag page. That’s 20 times faster then IE6.

Bookmark and Share

Leave a response