css selector for last div with a specific class

Question

I have this situation:

<div class="container">
 <div class="pagination-bar"></div>
 <div class="article"></div>
 [..]
 <div class="article"></div>
 <div class="pagination-bar"></div>
</div>

and this CSS:

.article {
 margin-bottom:20px;
}

What if I want the pagination-bar close to the last "article" div without the 20px margin?

UPDATED [see the pagination-bar both on the top and to the end of the container div]

Answer 1

You can have it like this, also compatible with IE7

div.article + div.article {
    margin-top:20px;
}

This adds the margin on top except for the very first article.

Answer 2

Try this:

.container > div:nth-last-child(2) + .pagination-bar { color: red; }

:nth-last-child will give you the second to last element in the container and the + selector will give you the adjacent element with class .pagination-bar.

Here's my test: http://jsfiddle.net/gYM7x/

With that said, browser support is limited for this pseudo class.