Last-Child in nested div











up vote
1
down vote

favorite












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









share|improve this question
























  • Possible duplicate of Margin-Top not working for span element?
    – user1178830
    Nov 7 at 17:55















up vote
1
down vote

favorite












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









share|improve this question
























  • Possible duplicate of Margin-Top not working for span element?
    – user1178830
    Nov 7 at 17:55













up vote
1
down vote

favorite









up vote
1
down vote

favorite











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









share|improve this 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;
}






html css angularjs css-selectors






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 7 at 18:18

























asked Nov 7 at 17:36









user1779418

314




314












  • Possible duplicate of Margin-Top not working for span element?
    – user1178830
    Nov 7 at 17:55


















  • Possible duplicate of Margin-Top not working for span element?
    – user1178830
    Nov 7 at 17:55
















Possible duplicate of Margin-Top not working for span element?
– user1178830
Nov 7 at 17:55




Possible duplicate of Margin-Top not working for span element?
– user1178830
Nov 7 at 17:55












4 Answers
4






active

oldest

votes

















up vote
3
down vote













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>





share|improve this answer





















  • 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 7 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: stackoverflow.com/questions/11700985/…
    – user1178830
    Nov 7 at 17:56


















up vote
1
down vote













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>








share|improve this answer




























    up vote
    0
    down vote













    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 .






    share|improve this answer




























      up vote
      0
      down vote













      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.






      share|improve this answer





















        Your Answer






        StackExchange.ifUsing("editor", function () {
        StackExchange.using("externalEditor", function () {
        StackExchange.using("snippets", function () {
        StackExchange.snippets.init();
        });
        });
        }, "code-snippets");

        StackExchange.ready(function() {
        var channelOptions = {
        tags: "".split(" "),
        id: "1"
        };
        initTagRenderer("".split(" "), "".split(" "), channelOptions);

        StackExchange.using("externalEditor", function() {
        // Have to fire editor after snippets, if snippets enabled
        if (StackExchange.settings.snippets.snippetsEnabled) {
        StackExchange.using("snippets", function() {
        createEditor();
        });
        }
        else {
        createEditor();
        }
        });

        function createEditor() {
        StackExchange.prepareEditor({
        heartbeatType: 'answer',
        convertImagesToLinks: true,
        noModals: true,
        showLowRepImageUploadWarning: true,
        reputationToPostImages: 10,
        bindNavPrevention: true,
        postfix: "",
        imageUploader: {
        brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
        contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
        allowUrls: true
        },
        onDemand: true,
        discardSelector: ".discard-answer"
        ,immediatelyShowMarkdownHelp:true
        });


        }
        });














         

        draft saved


        draft discarded


















        StackExchange.ready(
        function () {
        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53194824%2flast-child-in-nested-div%23new-answer', 'question_page');
        }
        );

        Post as a guest















        Required, but never shown

























        4 Answers
        4






        active

        oldest

        votes








        4 Answers
        4






        active

        oldest

        votes









        active

        oldest

        votes






        active

        oldest

        votes








        up vote
        3
        down vote













        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>





        share|improve this answer





















        • 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 7 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: stackoverflow.com/questions/11700985/…
          – user1178830
          Nov 7 at 17:56















        up vote
        3
        down vote













        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>





        share|improve this answer





















        • 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 7 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: stackoverflow.com/questions/11700985/…
          – user1178830
          Nov 7 at 17:56













        up vote
        3
        down vote










        up vote
        3
        down vote









        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>





        share|improve this answer












        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>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 7 at 17:45









        user1178830

        15010




        15010












        • 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 7 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: stackoverflow.com/questions/11700985/…
          – user1178830
          Nov 7 at 17:56


















        • 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 7 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: stackoverflow.com/questions/11700985/…
          – user1178830
          Nov 7 at 17:56
















        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 7 at 17:50




        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 7 at 17:50




        1




        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: stackoverflow.com/questions/11700985/…
        – user1178830
        Nov 7 at 17:56




        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: stackoverflow.com/questions/11700985/…
        – user1178830
        Nov 7 at 17:56












        up vote
        1
        down vote













        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>








        share|improve this answer

























          up vote
          1
          down vote













          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>








          share|improve this answer























            up vote
            1
            down vote










            up vote
            1
            down vote









            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>








            share|improve this answer












            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>








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





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






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 7 at 17:59









            Nimit Shah

            1,7391310




            1,7391310






















                up vote
                0
                down vote













                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 .






                share|improve this answer

























                  up vote
                  0
                  down vote













                  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 .






                  share|improve this answer























                    up vote
                    0
                    down vote










                    up vote
                    0
                    down vote









                    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 .






                    share|improve this answer












                    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 .







                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Nov 7 at 17:59









                    Khurram Shaikh

                    113




                    113






















                        up vote
                        0
                        down vote













                        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.






                        share|improve this answer

























                          up vote
                          0
                          down vote













                          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.






                          share|improve this answer























                            up vote
                            0
                            down vote










                            up vote
                            0
                            down vote









                            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.






                            share|improve this answer












                            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.







                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered Nov 7 at 18:23









                            user1779418

                            314




                            314






























                                 

                                draft saved


                                draft discarded



















































                                 


                                draft saved


                                draft discarded














                                StackExchange.ready(
                                function () {
                                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53194824%2flast-child-in-nested-div%23new-answer', 'question_page');
                                }
                                );

                                Post as a guest















                                Required, but never shown





















































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown

































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown







                                這個網誌中的熱門文章

                                Xamarin.form Move up view when keyboard appear

                                Post-Redirect-Get with Spring WebFlux and Thymeleaf

                                Anylogic : not able to use stopDelay()