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

Answer 1

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 2

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 3

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");

Answer 4

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.