:last-child pseudo class selector in CSS and Internet Explorer

Question

I have the following code:

ul.myList li{
     border-right: 1px dotted #000;
}

However, on the last element, I need to remove that border as the design that I am working from dictates that the last item does not require a border as a separator.

So, I need to target the last child of a list and so within my css I have added

ul.myList li:last-child{
     border-right: none;
}

Which as we all know, works fine in Firefox, Safari and Chrome.

The problem lies when we view the page in Internet Explore 6 through to 8.

Answer 1

So, after some digging around, I found the answer:

If the browser is IE<8, specify a stylesheet like this:

<!--[if lt IE 8]>
<link rel="stylesheet" href="css/ie_all.css" type="text/css" />
<![endif]-->

And within your IE stylesheet specify the following rules:

ul.myList li{
     border-right: expression(this.nextSibling==null?'none':'inherit');
}

The nextSibling expression looks to see if there is an element after it and if there is inherits the rule specified in the default stylesheet, if not it applys a new rule.

More information can be found here

Answer 2

IE8< does not support this pseudo selector. Check the MSDN article for all supported features :)

You could take a look at this jQuery solution to Enable pseudo selectors in IE, or just leave it as is in IE.