CODEWITHSUNDEEP
htmlcss-selectors
Richard R
Richard R

Reputation: 75

:last-child is not working

This is my first post here, so please tell me, if I'm doing something wrong. I have a problem with the following code:

That's my HTML:

            <div class="sideSection">
            <div class="sidebar">
            <div class="mainContainer">
            <div class="articleHeader">
            <h3>Sapien lorem tempus</h3>
            <h4>Pharetra sed bibendum lorem</h4>
            </div>
            <p>Nunc cursus quam vitae ipsum viverra luctus. Nam nullam feugiat massa lacinia lectus vitae. Sed eu turpis at adipiscing.</p>
            <div class="sidebarBox">
            <img src="images/pic04.jpg" alt="ernster Blick">
            <div class="sidebarBoxText">
            <a href="#">Cursus quam vitae</a>
            <p>Nunc cursus quam vitae ipsum viverra luctus sapien.</p>
            </div>
            </div>
            <div class="sidebarBox">
            <img src="images/pic05.jpg" alt="Straße">
            <div class="sidebarBoxText">
            <a href="#">Etiam at orci ut nibh</a>
            <p>Nunc cursus quam vitae ipsum viverra luctus sapien.</p>
            </div>
            </div>
            <div class="sidebarBox">
            <img src="images/pic06.jpg" alt="telefonierender Blick">
            <div class="sidebarBoxText">
            <a href="#">Mauris non tellus</a>
            <p>Nunc cursus quam vitae ipsum viverra luctus sapien.</p>
            </div>
            </div>
            <div class="sidebarBox">
            <img src="images/pic07.jpg" alt="Skyscraper">
            <div class="sidebarBoxText">
            <a href="#">Duis id ipsum</a>
            <p>Nunc cursus quam vitae ipsum viverra luctus sapien.</p>
            </div>
            </div>
            <div class="moreInfoButton"><a href="#">More Info</a></div>
            </div>
            </div>
            </div>

And here is my CSS:

.sideSection .sidebar,
.sideSection .sidebar .sidebarBox {
float: left;
}
.sideSection .sidebar .sidebarBox {
padding: 25px 0px 20px;
border-bottom-style: solid;
border-width: 1px;
border-color: #ccc;
}
.sideSection .sidebar .sidebarBox:last-child {
border: none;
}

Now, what I'm trying to do, is to remove the border from the last "sidebarBox" class. This isn't quite working out yet, because the code isn't affecting the border at all. I don't really know what I'm doing wrong, and I hope that someone can help me here, as it is for work :S

EDIT: Okay, as far as I figured it out by now, it's a problem with the s. When I use "".sidebarBox:nth-child(6)"" it works just fine.. Does the ":last-child" attribute actually count all s that I used in that section?

Upvotes: 0

Views: 362

Answers (2)

Stuart
Stuart

Reputation: 6785

:last-child only matches the actual last child of the parent div.

You have the .moreinfoButton following it. If you can move the button to outside the .mainContainer, it will work as you expect it

Upvotes: 1

felicete
felicete

Reputation: 63

The :last-child selector applies to the last element inside a parent div. In your case the parent div is .mainContainer and its last child is .moreInfoButton and not .sidebarBox.

I would recommend you to add last class to the sidebarBox you want to modify, i.e. <div class="sidebarBox last">

and the corrspondent css code is

.sideSection .sidebar .sidebarBox.last { border: none; }

Or another way to handle it is to wrap all your .sidebarBox elements in one parent <div>. Then you would be able to use :last-child selector.

Upvotes: 1

Related Questions