Style the last DIV in a row of DIVs

Question

I checked this post (How to style the first and last li with CSS or jQuery?) but am still seeking a suitable IE8(and pre IE8) solution.

I have a row of DIVs that are set to have a padding-right, but in order for the final one to align properly want the final DIV to have zero padding. I've used the .css + .css route before but that doesn't appear to work in IE8 and versions before it.

Any help would be appreciated.

Answer 1

Assuming there's a containing div wrapping all of these, you should be able to do this:

div.container {
    background-color: blue;
}
div.container .div-row {
    float: left;
    padding-right: 5px;
}
div.container .div-row:last-child {
    padding-right: 0px;
}

Answer 2

You can give a class to last div and get it working with that class in IE.

<div class="last"></div>

<style>
    .last
    {
        padding-right:0;
    }
</style>