Using Prototype to emulate :last-child on IE6

2007-11-16 • James Mason

Usually it's easy to find a CSS hack to deal with Internet Explorer's oddities... not so with the :last-child pseudo element, at least as far as I can tell. But using the Prototype javascript library, I was able to build a suitable replacement in 3 lines of code (it could have been 1 if I didn't care about readability or expandability).

Here's my scenario. I have a list of items, and I'm using CSS to turn them into a simple horizontal menu (see here to explain). To the right of each item, I want a vertical bar (like a |) but properly aligned, and not on the last item. So, I used the following css, putting a right-hand border on all but the last element:

ul.menu {
 float: left;
 padding: 0;
 margin: 0;
 list-style: none;
}

ul.menu li {
 float: left;
 position: relative;
 padding: 0px 5px;
 border-right: 1px solid #E00000;
}


ul.menu li:last-child {
 border-right: 0;
}

...

<ul class="menu">
 <li>First Menu Item</li>
 <li>Second</li>
 <li>Etc..</li>
</ul>

The results: perfect in Firefox, not so in IE6: the last item in the list still has a border, because the :last-child pseudo-element isn't supported.

So, instead, I'm using the following javascript (this won't work without Prototype):

document.getElementsByClassName('menu').each(function(menu) {
 $($(menu.immediateDescendants()).last()).setStyle({borderRight: '0'});
});

Bingo! No border-right on the last menu item, in IE or Firefox. Yay!

Using Prototype to emulate :last-child on IE6

LinuxFest Northwest 2007!

First. Post. Ever.