CODEWITHSUNDEEP
htmlcss
Sachin
Sachin

Reputation: 1698

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

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.

Upvotes: 0

Views: 3736

Answers (4)

LcSalazar
LcSalazar

Reputation: 16841

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.

Upvotes: 2

PalDev
PalDev

Reputation: 564

I would keep is simple stupid, either:

  1. 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 -

  1. 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">

Upvotes: 2

JDB
JDB

Reputation: 25810

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.

Upvotes: 1

Lenny Sirivong
Lenny Sirivong

Reputation: 1031

@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 -->

Upvotes: 2

Related Questions