Css selector for last div with 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 swap bar to be close to the last section of the “article” without a 20-pixel margin?

UPDATED [see pagination panel both at the top and at the end of the div container]

Answer 1

You may have it this way, also compatible with IE7

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

This adds an edge to the top, with the exception of the very first article.

Answer 2

Try the following:

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

:nth-last-child will provide you with the second to last element in the container, and the + selector will provide you with a neighboring element with the class .pagination-bar .

Here is my test: http://jsfiddle.net/gYM7x/

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

Answer 3

This should do it:

 div.container div.article:last-child {margin-bottom: 0;} 

I do not think that you have correctly formulated the question. In appearance, there is no field in the .pagination-bar panel, in fact, you want to remove the lower border of the field from the last section of the article, so the answer above, which adds + .pagination-bar, may not work because it is targeting the wrong element Try it without + .pagination-bar

Answer 4

Using the last-child selector is the right way, as others have said, but according to: http://www.quirksmode.org/css/contents.html this CSS selector is not supported in IE 5.5, 6, 7 or 8.