Question

I have a predetermined set of items generated by a different page which I can’t modify. I want to style the first and last items in the list. The first item is no problem, but because the last item is not the last DIV in the list, I can’t figure out how to modify it. Removing the last description DIV, which is also line 15 of this Fiddle http://jsfiddle.net/CeJAS/ achieves what I want, but I can’t modify the real HTML – the empty description DIVs are unfortunately part of the markup. Can this be achieved with CSS?

<div class="list">
    <div class="title">
    <a href="#">Link</a>
    </div>
    <div class="description"> </div>

    <div class="title">
    <a href="#">Link</a>
    </div>
    <div class="description"> </div>

    <div class="title">
    <a href="#">Link</a>
    </div>
    <div class="description"> </div>
</div>

Answer 1

After doing a bit of Googling, I’ve found you can use .list div:nth-last-child(2).

It’s also supported by IE 9 and so far 10.