How to remove margin from last li, in pure CSS with IE 6 support?

Question

In this condition is it possible to not to apply margin-right to last li.

I need pure css way and support in IE6 and 7 also and without changing HTML. is there any way to achieve this.

ul li {display:inline;margin-right:10px}

<ul id="nav">
    <li><a href="#nowhere" >Lorem</a></li>
    <li><a href="#nowhere" >Aliquam</a></li>
    <li><a href="#nowhere" >Morbi</a></li>
    <li><a href="#nowhere" >Praesent</a></li>
    <li><a href="#nowhere" >Pellentesque</a></li>
</ul>

Answer 1

Give the last <li> a class and then apply margin-right: 0px to the class.

There is a :last-child pseudo class in CSS3 but won't work in IE 6 or 7.

Answer 2

Normally I'd advise using the :last-child selector, but IE 6 and 7 do not support this.

You could add a class to the last li element and apply a style like margin-right: 0 to it.

Without changing the HTML, I'm not aware of any pure css way to make that work in IE 6 or 7.

Answer 3

You could put a negative bottom margin on the tag. I don't even know if that would work, but it's worth a try.

Answer 4

You can use IE CSS expressions to achieve this.

ul#nav li {
    margin-right: 10px;
    /* for IE only: */
    margin-right: expression(this.nextSibling == null ? '0' : '10px' );
}

/* for standards browsers: */
ul#nav li:last-child {
    margin-right: 0;
}

Tested and it works in IE7. I don't have access to IE6 but it should work the same.

If possible, it would be best to put the expression rule in an IE-only stylesheet.