last-child not working as expected

Question

The issue lies within this CSS and HTML  Here is a link to jsFiddle with the sample code   HTML   lt ul gt       lt li class complete  gt 1 lt  li gt       lt li class complete  gt 2 lt  li gt       lt li gt 3 lt  li gt       lt li gt 4 lt  li gt   lt  ul gt    CSS  li complete last-child       background-color yellow     li complete last-of-type       background-color yellow      Shouldn t either of these lines of CSS target the last li element with the  complete  class   This query in jQuery doesn t target it either      li complete last-child      But this one does      li complete   last       x000D   x000D  li   x000D    background-color  green  x000D    x000D  li complete first-child   x000D    background-color  white  x000D    x000D  li complete first-of-type   x000D    background-color  red  x000D    x000D  li complete last-of-type   x000D    background-color  blue  x000D    x000D  li complete last-child   x000D    background-color  yellow  x000D    x000D   lt ul gt  x000D     lt li class  complete  gt 1 lt  li gt  x000D     lt li class  complete  gt 2 lt  li gt  x000D     lt li gt 3 lt  li gt  x000D     lt li gt 4 lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

last-child will not work if the element is not the VERY LAST element  In addition to Harry s answer  I think it s crucial to add emphasize that  last-child will not work if the element is not the VERY LAST element in a container  For whatever reason it took me hours to realize that  and even though Harry s answer is very thorough I couldn t extract that information from  The last-child selector is used to select the last child element of a parent    Suppose this is my selector  a last-child      This works    lt div gt       lt a gt  lt  a gt       lt a gt This will be selected lt  a gt   lt  div gt    This doesn t     lt div gt       lt a gt  lt  a gt       lt a gt This will no longer be selected lt  a gt       lt div gt This is now the last child      lt  div gt   lt  div gt    It doesn t because the a element is not the last element inside its parent   It may be obvious  but it was not for me

User · Answer

The last-child selector is used to select the last child element of a parent  It cannot be used to select the last child element with a specific class under a given parent element   The other part of the compound selector  which is attached before the  last-child  specifies extra conditions which the last child element must satisfy in-order for it to be selected  In the below snippet  you would see how the selected elements differ depending on the rest of the compound selector    x000D   x000D   parent  last-child     this will select all elements which are last child of  parent    x000D    font-weight  bold  x000D    x000D   x000D   parent div last-child     this will select the last child of  parent only if it is a div   x000D    background  crimson  x000D    x000D   x000D   parent div child-2 last-child     this will select the last child of  parent only if it is a div and has the class child-2   x000D    color  beige  x000D    x000D   lt div class  parent  gt  x000D     lt div class  child  gt Child lt  div gt  x000D     lt div class  child  gt Child lt  div gt  x000D     lt div class  child  gt Child lt  div gt  x000D     lt div gt Child w o class lt  div gt  x000D   lt  div gt  x000D   lt div class  parent  gt  x000D     lt div class  child  gt Child lt  div gt  x000D     lt div class  child  gt Child lt  div gt  x000D     lt div class  child  gt Child lt  div gt  x000D     lt div class  child-2  gt Child w o class lt  div gt  x000D   lt  div gt  x000D   lt div class  parent  gt  x000D     lt div class  child  gt Child lt  div gt  x000D     lt div class  child  gt Child lt  div gt  x000D     lt div class  child  gt Child lt  div gt  x000D     lt p gt Child w o class lt  p gt  x000D   lt  div gt  x000D   x000D   x000D      To answer your question  the below would style the last child li element with background color as red   li last-child      background-color  red      But the following selector would not work for your markup because the last-child does not have the class  complete  even though it is an li   li complete last-child      background-color  green      It would have worked if  and only if  the last li in your markup also had class  complete      To address your query in the comments       Harry I find it rather odd that   complete last-of-type does not work  yet  complete first-of-type does work  regardless of it s position it s parents element  Thanks for your help     The selector  complete first-of-type works in the fiddle because it  that is  the element with class  complete   is still the first element of type li within the parent  Try to add  lt li gt 0 lt  li gt  as the first element under the ul and you will find that first-of-type also flops  This is because the first-of-type and last-of-type selectors select the first last element of each type under the parent   Refer to the answer posted by BoltClock  in this thread for more details about how the selector works  That is as comprehensive as it gets

User · Answer

I encounter similar situation  I would like to have background of the last  item to be yellow in the elements that look like      lt div class  container  gt     lt div class  item  gt item 1 lt  div gt     lt div class  item  gt item 2 lt  div gt     lt div class  item  gt item 3 lt  div gt           lt div class  item  gt item x lt  div gt     lt div class  other  gt I m here for some reasons lt  div gt   lt  div gt    I use nth-last-child 2  to achieve it    item nth-last-child 2      background-color  yellow      It strange to me because nth-last-child of item suppose to be the second of the last item but it works and I got the result as I expect  I found this helpful trick from CSS Trick

[html] :last-child not working as expected?

:last-child will not work if the element is not the VERY LAST element

Examples related to html

Examples related to css

Examples related to css-selectors