CODEWITHSUNDEEP
csspseudo-classcss-selectors
FoxKllD
FoxKllD

Reputation: 1051

Why last-child isn't working?

I got a problem for you to solve, as you know.
I ripped off all my hair trying to figure out why the heck last-child isn't working.
I tried to remove border-right with last-child but for some reasons, it didn't work out.
Here's is the link

Upvotes: 0

Views: 3488

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

Inside your ul element, there is a div element after the last li element. This is invalid markup and may have unpredictable effects. Moreover, it probably makes browsers treat the div element the last child of the ul element.

Upvotes: 0

sandeep
sandeep

Reputation: 92793

The main reason why the last-child is not working because in your #countdown UL the last-child is <div class="clear"></div> not LI. So it's better to use last-of-type instead of last-child. Like this:

#countdown li:last-of-type .num,
  #countdown li:last-of-type .text{
    border:0;
  }

Check this http://jsbin.com/apuhep/4/edit#html,live

Upvotes: 1

Chris Morgan
Chris Morgan

Reputation: 90762

Your selector is #countdown .num:last-child.

Your HTML is

<ul ID="countdown">
  <li> <div ID="days" class="num">00</div>  <div CLASS="text">days</div>     </li>
  <li> <div ID="hours" class="num">00</div> <div CLASS="text">hours</div>    </li> 
  <li> <div ID="mins" class="num">00</div>  <div CLASS="text">minutes</div>  </li>
  <li> <div ID="secs" class="num">00</div>  <div CLASS="text">seconds</div>  </li>
  <div class="clear"></div>
</ul>

Think: is .num the last child of its parent? Answer: no.

Your selector should be more like #countdown > li:last-of-type .num, selecting .num inside the last li in #countdown.

Note that in this case last-of-type must be used rather than last-child because you've got that <div class="clear"></div>, which is invalid HTML (you can't have a div directly inside a ul).

Upvotes: 6

Related Questions