Remove margin in last child

Question

My code here:

HTML

<nav id="pages">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Donate</a></li>
        <li><a href="#">Video</a></li>
        <li><a href="#" class="last">Contact</a></li>
    </ul>
</nav>  <!-- end pages -->

CSS

#pages{
    position: absolute;
    right: 0;
    top: 70px;

    ul li{
        float: left;
        margin-right: 5px;

        a{
            color: @link-color;
            display: block;
            padding: 0 10px;
            border-radius: 5px;
            font-weight: bold;
        }
    }
}

.last{
    margin-right: 0;
}

I add class "last" to last child to remove margin but not effected. I don't use :last-child because it will not with IE6 or IE7. Hope someone help?

Answer 1

There is no need to add a class "last" the best practice to do this and not write a lot of code would be:

#pages li:last-child{
    margin-right: 0px;
}

This way, you don't have to create any class last or anything. The css will look in the id pages, the last li (last-child) and will make it with margin-right of 0.