Last-Child in nested div

Question

I'm newer to CSS, and after searching google I'm still having a hard time getting the :last-child selector to work.

HTML:

<div class="A">
    <div class="B">
        <div class="C"></div>
    </div>
    <div class="B">
        <div class="C"></div>
    </div>
    <div class="B">
        <div class="C"></div>
    </div>
</div>

CSS:

.A > .B > .C {
    margin-bottom: 8px;
}

.A > .B > .C:last-child {
    margin-bottom: 0px;
}

My goal is I want the first two .C divs to have a bottom margin, but the last .C div should not have a margin. However, :last-class isn't being registered - all 3 .C divs have a bottom-margin of 8px.

I've also tried variations of :last-child on different classes, and the child selector vs no child selector I'm not sure what I'm doing wrong / what I need to do to set the last .C class margin-bottom to 0px.

Edit: I'm actually able to get the above working in codepen.io... below is my actual code, which I can't get to work correctly.

<div class="A" ng-repeat="component in components">
    <div title="{{component.name}}" ng-show="rightStatusBarFlags[component.id] === true" class="B"  ng-class="(component.notifyFlag === true)? 'right-status-alert' : ''" ng-click="toggleComponentVisibility(component)">
        <span class="C">
            <img class="icon-component_{{component.id}}" ng-show="!component.notifyFlag"></img>
        </span>
    </div>
</div>

This will repeat for the number of components, a max of 4 components.

Edit 2: This was solved by trying different things that people below suggested. I changed the span to a div, then realized that angular repeats the Class A div. Below is my final html and css:

HTML:

<div class="A">
    <div class="B" ng-repeat="component in components">
        <div title="{{component.name}}" ng-show="rightStatusBarFlags[component.id] === true" class="C"  ng-class="(component.notifyFlag === true)? 'right-status-alert' : ''" ng-click="toggleComponentVisibility(component)">
            <div class="btn btn-status-sections">
                <img class="icon-component_{{component.id}}" ng-show="!component.notifyFlag"></img>
            </div>
        </div>
    </div>
</div>

CSS:

.A .B .C {
margin-bottom: 8px;
}
.A .B:last-child .C {
margin-bottom: 0px;
}

Possible duplicate of [Margin-Top not working for span element?](https://stackoverflow.com/questions/11700985/margin-top-not-working-for-span-element) — user1178830, Nov 07 '18 at 17:55

score 4 · Answer 1 · answered Nov 07 '18 at 17:45

4

Your C divs are all just single children of the B divs. So every single one will have a margin of 0. You want to add a margin to the C that's inside the last B. So

.A > .B:last-child > .C {
    margin-bottom: 0px;
}

Alternatively, you can rearrange your html and keep the css as you defined it as follows:

<div class="A">
    <div class="B">
        <div class="C"></div>
        <div class="C"></div>
        <div class="C"></div>
    </div>
</div>

answered Nov 07 '18 at 17:45

user1178830

436
3
11

I added my actual code to the post - I realized I can get the simple example working in codepen.io, yet can't for my real code. Unfortunately re-arranging the html isn't possible since it's an angular repeated section. I did try what you suggested with .B:last-child, but again it wasn't registered. – user1779418 Nov 07 '18 at 17:50
1

You have spans instead of the divs in your original example. They don't accept margin-top because they are inline elements. Look here for previous answers to this question: https://stackoverflow.com/questions/11700985/margin-top-not-working-for-span-element – user1178830 Nov 07 '18 at 17:56

score 1 · Answer 2 · answered Nov 07 '18 at 17:59

I see you want to apply css on you div having class "C" under "A". for this case you don't need to bother Class "B".

For example if you have parent class. you are able to access nth depth child. like I tried.

<div class="A">
<div class="B">
    <div class="C">2</div>
</div>
<div class="B">
    <div class="C">2</div>
</div>
<div class="B">
    <div class="C">3</div>
</div>

Here is the CSS

.A > div > div { 
  background-color:yellow;
}
.A > div:last-child > div:last-child { 
  background-color:red;
}

https://jsfiddle.net/kyaLh19n/

if you have look at this image what I did. I did apply CSS on all childs inside class A and then override the last one.

Hope I am able to help you .

score 1 · Answer 3 · answered Nov 07 '18 at 17:59

With your code you can use .A > .B:last-child > .C and set margin-bottom:0.

See the below Snippet:

.A {
  border:1px solid red;
}

.B > .C {
    margin-bottom: 8px;
    background-color:lightpink;
    color:white;
}

.A > .B:last-child > .C {
    margin-bottom: 0px;
}

<div class="A">
    <div class="B">
        <div class="C">1</div>
    </div>
    <div class="B">
        <div class="C">2</div>
    </div>
    <div class="B">
        <div class="C">3</div>
    </div>
</div>

score 0 · Answer 4 · answered Nov 07 '18 at 18:23

Thank you everyone!

I needed to do a combination of what people suggested.

First was changing the span to a div.
Second was adding a wrapper div above the angular repeated div, which became Class A.
Third was using .A .B:last-child .C in my css.

I also learned that posting the actual code instead of a basic example helps more.

Last-Child in nested div

4 Answers4