：最后一个孩子不工作

Question

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?

Answer 1

: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

Answer 2

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, ie <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.