oke, I will start with an excuse to jeremy keith, after outright stealing his lecture title for an somewhat lesser (quality) article, but I am trying… But his lecture gave me inspiration to give you a series of small tricks on how to use ‘advanced’ css selectors together with javascript snippets on how to make it work in IE..

First of, last child selectors.

Sometimes you have to put a special emphasis on something like say a last list item. With good css you would do something like this…

#foo li:last-child {
do: something;

but wait, I hear you say, IE doesn’t support last-child, so I can’t use it. No, but now javascript comes to the rescue!

After hearing the great jeremy keith speak on javascript and how it is good for you, I decided to take on the dom my self. After all, I have been frustrated by the lack of standards support in IE for a long time now. Time to strike back.

so javascript to the rescue.

function lastListItem () {
var k = document.getElementById('foo');
if (k) {
var last = k.lastChild;
last.className += "InExLIlast";

all we have to do now is extend our style sheet with the ie className, which we have given a prefix to distinguise it from the normal (read correct) css classes. So our css becomes:

#foo li.InExLIlast,  #foo li:last-child {
do: something;


Kevin, in response to your question, the function is called in the following way.

function include() {
window.attachEvent("onload", include);

There you go, one more trick up your sleeve.

If you have any comments, questions or something like that let me know.