How can I remove border-bottom of last div' separator through CSS?

Question

I am showing latest news in a div box in which each news is separated from others by a separator of border-bottom. Note that in the HTML I am not using any ul li; rather than I am using simply divs. The problem is that the last news div is also showing the border bottom separator. I dont know how to remove it even I have already tried :last-child selector but it's not working. I know by using ul li, the problem can be solved by :last-child, but I dont want to change my HTML. Here is a snaphost:

HTML CODE:

<div class="float_left_div posts">
    <h3>Latest News</h3>
    <div class="news_wrapper">
        <div class="news_txt">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. <span>more+</span></p>
        </div>
        <div class="div_separator"></div>
    </div>
    <div class="news_wrapper">
        <div class="news_txt">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. <span>more+</span></p>
        </div>
        <div class="div_separator"></div>
    </div>
    <div class="news_wrapper">
        <div class="news_txt">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. <span>more+</span></p>
        </div>
        <div class="div_separator"></div>
    </div>
</div>

The demo is at:

JSFiddle

So by keeping the same HTML, how can we remove the last border of separtor?

Answer 1

Use CSS last-child property to remove the border.

.posts .news_wrapper:last-child .div_separator
{
border-bottom:0px;
}

DEMO