Hacking the :first-child pseudo-class into IE6 with jQuery and CSS

07

Hacking the :first-child pseudo-class into IE6 with jQuery and CSS

IE6 continues to define the lowest common denominator for our JavaScript and CSS strategies. IE7 may finally have edged past its younger sibling in terms of market share, but as of late 2007, IE6 still commanded commanded close to a third of the market.

For the relaunch of Pathfinder's website, we wanted our code to be standards-compliant and forward-looking, but we didn't want things to fall to pieces in IE6. We therefore used a variety of strategies to achieve a high degree of visual fidelity between IE6 and newer, better browsers. When CSS hacks and filters wouldn't provide us what we needed for IE6, we resorted to one of two strategies:

Use JavaScript to create the desired visual effect so that only JavaScript-disabled IE6 users would see a less than perfect rendering.

Just accept a degraded visual experience in a seven-year-old browser with declining market share.

Luckily, strategy No. 1 worked in most cases. Often, a single line of jQuery and a couple of CSS tweaks would create the desired look and feel. This was the case with one of IE6's most annoying shortcomings: its lack of support for CSS's :first-child pseudo-class.

The :first-child pseudo-class (and its sibling, :last-child) are crucial when, for example, you want to display a list of items in which a rule line appears between items rather than after each item, like this:

item
----
item
----
item
----
item

The pre-web standards way to create such a list would have been to use non-semantic paragraph and horizontal-line elements:

<p>item</p>
<hr/>
<p>item</p>
<hr/>
<p>item</p>
<hr/>
<p>item</p>

The post-web standards way is to create a ul element with a number of li children, then apply a border to the top of all but the first li:

That works well enough if you're not too obsessed with semantic purity, but it presents a problem when you're composing these lists on the fly out of reusable modules. If any given module may be plugged into any position within the list, hard-coding a class of "first" into the markup won't work. What can you do?

In our case, we simply wrote a line of JavaScript code that calls on jQuery's selector mechanism to add a class to the first child of the node in question. Then we wrote CSS that applies the same properties to elements with our newly created class as it does to elements with a pseudo-class of :first-child.

In our real-world use case, the content in question isn't structured as a ul, but rather as a series of divs, each of which contains an article. Still, the principle is the same.

The HTML looks like this. (The nested divs allow us to give div.article a dashed border while simulating a rule line with a separate, solid border on div.articleWrapper.)

In Firefox, the rendered page looks exactly like it should (see the first screenshot in this post). In IE6 with JavaScript enabled, it looks remarkably similar (see the second screenshot). The only difference is in Firefox's and IE6's renderings of the dashed border around each article.

Hey developers,
I hope it is not to late, I think you may not heard about “Dean Edward” , he invented a much better solution : a small JavaScript file included with your pages , and fix all IE6 problem , actually convert ie6 into a completely different browser , no more CSS nasty hacks , png can be fixed on the fly and the box model is much better . all what you have to do is to include this script in the header of every page in your website.

[…] have also used another method from this website Hacking the :first-child pseudo-class into IE6 with jQuery and CSS | Pathfinder Development | Softwa… please look at the example i have done at Untitled Document only in ie6 the 1st list item is not […]