Last-Child in nested div

user_1779418 0
Viewed 2286

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;
}
angularjs css-selectors css html
4 Answers

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

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;
}

Fiddle test

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 .

user_95637880

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>

user_84405980

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.

user_17794180
Related