How to remove border-bottom of last div in a group - CSS

Question

How can I remove the border bottom of last div "footer_column"? Here is my HTML -

<div id="footer_wrapper"> <!-- footer_wrapper starts here -->
    <div id="footer"> <!-- footer starts here -->
    <div class="footer_column">
        <h4>Digital Strategy</h4>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </div>
    <div class="footer_column">
        <h4>Search</h4>
        <ul>
            <li><a href="#">SEO</a></li>
            <li><a href="#">Google AdWords</a></li>
            <li><a href="#">Bing Ads</a></li>
            <li><a href="#">Remarketing</a></li>
        </ul>
    </div>
    <div class="footer_column">
        <h4>Social</h4>
        <ul>
            <li><a href="#">Facebook Ads</a></li>
            <li><a href="#">Youtube Ads</a></li>
        </ul>
    </div>
    <div class="footer_column">
        <h4>Conversion</h4>
        <ul>
            <li><a href="#">Landing Page Creation</a></li>
            <li><a href="#">A/B Testing</a></li>
        </ul>
    </div>
    <div class="footer_column">
        <h4>Contact Us</h4>
        <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Blog</a></li>
        </ul>
    </div>
        <div class="clr"></div>

        <div id="copyright">
            <p>&copy; 2014.</p>
        </div>

    </div> <!-- footer ends here -->
</div> <!-- footer_wrapper ends here -->

This is CSS -

/* footer */
.footer_column
{
    float:none;
    width:100%;
    margin-bottom:5%;
    padding-bottom:10px;
    border-bottom:1px solid #8f8f8f;
}

.footer_column:last-child
{
    border-bottom:none;
}

But it's not working. The last div "footer_column" still have border bottom. I know I can remove it by using first-child and border-top but I don't want to do that. I only want to do it with border-bottom and last-child. Please help me on this.

The element you want to target is not actually the *last-child* of its parent. The last child would be `copyright`. — LcSalazar, Sep 17 '14 at 18:00
but i want to target last element of class .footer_column in the group. how to do that? — Sachin, Sep 17 '14 at 18:02

score 2 · Answer 1 · answered Sep 17 '14 at 18:04

@LcSalazar is right, last-child literally means the last child in an element - not the last one of the set of .footer_columns, as you seem to be expecting. So your last-child rule will only be applied if there are no other elements after it.

One solution would be to wrap all of those .footer_columns in a container like so:

<div id="footer_wrapper"> <!-- footer_wrapper starts here -->
    <div id="footer"> <!-- footer starts here -->
    <div class="footer_column_container">
        <div class="footer_column">
            <h4>Digital Strategy</h4>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </div>
        <div class="footer_column">
            <h4>Search</h4>
            <ul>
                <li><a href="#">SEO</a></li>
                <li><a href="#">Google AdWords</a></li>
                <li><a href="#">Bing Ads</a></li>
                <li><a href="#">Remarketing</a></li>
            </ul>
        </div>
        <div class="footer_column">
            <h4>Social</h4>
            <ul>
                <li><a href="#">Facebook Ads</a></li>
                <li><a href="#">Youtube Ads</a></li>
            </ul>
        </div>
        <div class="footer_column">
            <h4>Conversion</h4>
            <ul>
                <li><a href="#">Landing Page Creation</a></li>
                <li><a href="#">A/B Testing</a></li>
            </ul>
        </div>
        <div class="footer_column">
            <h4>Contact Us</h4>
            <ul>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
        </div>
    </div>
        <div class="clr"></div>

        <div id="copyright">
            <p>&copy; 2014. All Rights Reserved. eCLICKS New Zealand - eCLICKS United Arab Emirates.</p>
        </div>

    </div> <!-- footer ends here -->
</div> <!-- footer_wrapper ends here -->

score 2 · Accepted Answer · answered Sep 17 '14 at 18:05

I would keep is simple stupid, either:

Add another class, .footer-last-child and remove the border:

.footer-last-child { border-bottom:none;}

and classify the last child with it as a second class:

<div class="footer_column footer-last-child">

OR -

Add an ID to this item, and remove the border: #last-child{border-bottom:none;}

while your HTML would be

<div class="footer_column" id="last-child">

score 2 · Answer 3 · edited May 23 '17 at 12:29

2

It doesn't work because the element you want to target is not actually the last-child of its parent. The last child in this case would be the copyright div.

Also, there's no "last of the class" selector. (CSS: How to say .class:last-of-type [classes, not elements!])

Perhaps you can target the specific child nth:

.footer_column:nth-child(5) {
    border-bottom:none;
}

Though it would require the divs count to be constant.

edited May 23 '17 at 12:29

Community

1
1

answered Sep 17 '14 at 18:05

LcSalazar

16,524
3
37
69

I think he was referring to the last footer_column div and not to the copyright one – PalDev Sep 17 '14 at 18:07
@PalDev Yes, of course. That's what I'm explaining. – LcSalazar Sep 17 '14 at 18:08
ah ye :-) missed the begining – PalDev Sep 17 '14 at 18:10

score 1 · Answer 4 · answered Sep 17 '14 at 18:05

1

Your footer_column DIV is not the last child. Your copyright DIV is the last child.

Try moving the copyright and clr DIV out of the footer DIV.

There is currently no CSS selector to choose the last element with a particular class within a container.

answered Sep 17 '14 at 18:05

JDB

25,172
5
72
123

How to remove border-bottom of last div in a group - CSS

4 Answers4