CODEWITHSUNDEEP
htmlcss
Sachin
Sachin

Reputation: 1698

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

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:

Image Link

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?

Upvotes: 4

Views: 10918

Answers (2)

Jay
Jay

Reputation: 792

Please be aware that the the :last-child pseudo-class does not work in most browsers. If i where you i would put the border to the top (instead of bottom) and then use 

.posts .news_wrapper:first-child .div_separator{border-top:0px;}

Please note first:child is recognised in most browsers.

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

Use CSS last-child property to remove the border.

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

DEMO

Upvotes: 8

Related Questions