0

I'm trying to teach myself manipulating heavily nested elements/tags using first-child and last-child. I asked another question and I thought I had this fully understood with last-child/first-child, but apparently I'm still not getting it.

I have no idea why the last-child code below isn't working correctly.

div.row div.col-4 div.row:first-child {
    background-color: yellow;
}

div.row div.col-4 div.row:last-child {
    background-color: blue;
}
<div class="container">
        <div class="row">
           
           
            <div class="col-4">
               <div class="row">
                   <div class="col-4">
                       <button class="btn btn-primary"><a href="#">some text | <span>red text here</span></a></button>
                   </div>
               </div>
               <div class="row">
                   <div class="col-4">
                       <button class="btn btn-primary"><a href="#">some text | <span>white text</span></a></button>
                   </div>
               </div>
               <div class="row">
                   <div class="col-4">
                       <button class="btn btn-primary"><a href="#">some text | <span>white text</span> - this row should be blue</a></button>
                   </div>
               </div>
               
                <a href="#" class="btn btn-primary">Primary Button |<span> yellow text here</span></a>
            </div>
            
            
            <div class="col-4">
               <div class="row">
                   <div class="col-4">
                       <button class="btn btn-primary"><a href="#">some text | <span>red text here</span></a></button>
                   </div>
               </div>
               <div class="row">
                   <div class="col-4">
                       <button class="btn btn-primary"><a href="#">some text | <span>white text</span></a></button>
                   </div>
               </div>
               <div class="row">
                   <div class="col-4">
                       <button class="btn btn-primary"><a href="#">some text | <span>white text</span> - this row should be blue</a></button>
                   </div>
               </div>
               
                <a href="#" class="btn btn-primary">Primary Button |<span> yellow text here</span></a>
            </div>
            
            
            <div class="col-4">
               <div class="row">
                   <div class="col-4">
                       <button class="btn btn-primary"><a href="#">some text | <span>red text here</span></a></button>
                   </div>
               </div>
               <div class="row">
                   <div class="col-4">
                       <button class="btn btn-primary"><a href="#">some text | <span>white text</span></a></button>
                   </div>
               </div>
               <div class="row">
                   <div class="col-4">
                       <button class="btn btn-primary"><a href="#">some text | <span>white text</span> - this row should be blue</a></button>
                   </div>
               </div>
               
                <a href="#" class="btn btn-primary">Primary Button |<span> yellow text here</span></a>
            </div>
            
            
            

        </div>
    </div>
eqiz
  • 1,521
  • 5
  • 29
  • 51
  • 1
    `a` is the last-child .. you are looking for `last-of-type` – Temani Afif Aug 28 '19 at 23:16
  • I'm just lost on why its not changing it to blue on background.. if i drop it to: div.row div.col-4 div.row then of course works for all the divs... however if i try to simply change the first-child to last-child it doesn't work and I'm wanting to know why... I am not trying to change the background color of the that isn't inside of a div – eqiz Aug 28 '19 at 23:18
  • How come even though I'm saying div.row:last-child why is it even looking at ? it doesn't have those attributes – eqiz Aug 28 '19 at 23:19
  • it's an AND condition .. it need to be :last-child AND have a class .row AND be a div --> you don't have any element meeting these requirements – Temani Afif Aug 28 '19 at 23:22
  • add many duplicates: take the time to read them and you will understand the logic behind those selectors – Temani Afif Aug 28 '19 at 23:24
  • I think I get it now... so last-child trys to gets the last child element no matter the literal last element/tag is what and checks to see if the conditions of what is before the :last-child is met before it's considered the correct selection... while last-of-type is specific to what you are looking for. thanks a lot for the links above and explanation – eqiz Aug 28 '19 at 23:27

0 Answers0