: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.

Answer 3

As Internet Explorer before version 9 (which is still in development) doesn't support :last-child selector at all, my best solution, unfortunately, would be to set a class or id on the last element in your list and try to select that.

Of course, if leaving the right border in for IE won't break the layout completely, you may want to leave your code as is, if you don't mind IE screwing up rendering just a little.

Answer 4

You can do this using jQuery. So instead of relying on CSS. Use jQuery Selectors to set the property of your last element. I understand that u havent tagged your question with it.

jQuery('ul.myList li:last-child').css("Key","value");