CSS last-child selector select last-element of specific class not last child inside of parent

Question

lt div class  commentList  gt      lt article class  comment   id  com21  gt  lt  article gt      lt article class  comment   id  com20  gt  lt  article gt      lt article class  comment   id  com19  gt  lt  article gt      lt div class  something  gt  hello  lt  div gt   lt  div gt    I want to select  com19     comment       width 470px      border-bottom 1px dotted  f0f0f0      margin-bottom 10px      comment last-child       border-bottom none      margin-bottom 0      That does not work as long as I do have another div something as actual last child in the commentList  Is it possible to use the last-child selector in this case to select the last appearance of article comment   jsFiddle

User · Accepted Answer

last-child only works when the element in question is the last child of the container  not the last of a specific type of element  For that  you want  last-of-type  http   jsfiddle net C23g6 3   As per  BoltClock s comment  this is only checking for the last article element  not the last element with the class of  comment    x000D   x000D  body   x000D    background  black  x000D    x000D   x000D   comment   x000D    width  470px  x000D    border-bottom  1px dotted  f0f0f0  x000D    margin-bottom  10px  x000D    x000D   x000D   comment last-of-type   x000D    border-bottom  none  x000D    margin-bottom  0  x000D    x000D   lt div class  commentList  gt  x000D     lt article class  comment   id  com21  gt  lt  article gt  x000D   x000D     lt article class  comment   id  com20  gt  lt  article gt  x000D   x000D     lt article class  comment   id  com19  gt  lt  article gt  x000D   x000D     lt div class  something  gt  hello  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Something that I think should be commented here that worked for me   Use  last-child multiple times in the places needed so that it always gets the last of the last   Take this for example    x000D   x000D   page one  page-container  comment last-child   x000D    color  red  x000D    x000D   page two  page-container last-child  comment last-child   x000D    color  blue  x000D    x000D   lt p gt  When you use  comment last-child  lt  p gt  x000D   lt p gt  you only get the last comment in both parents  lt  p gt  x000D   x000D   lt div class  page one  gt  x000D     lt div class  page-container  gt  x000D       lt p class  comment  gt  Something  lt  p gt  x000D       lt p class  comment  gt  Something  lt  p gt  x000D     lt  div gt  x000D   x000D     lt div class  page-container  gt  x000D       lt p class  comment  gt  Something  lt  p gt  x000D       lt p class  comment  gt  Something  lt  p gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt p gt  When you use  page-container last-child  comment last-child  lt  p gt  x000D   lt p gt  you get the last page-container s  last comment  lt  p gt  x000D   x000D   lt div class  page two  gt  x000D     lt div class  page-container  gt  x000D       lt p class  comment  gt  Something  lt  p gt  x000D       lt p class  comment  gt  Something  lt  p gt  x000D     lt  div gt  x000D   x000D     lt div class  page-container  gt  x000D       lt p class  comment  gt  Something  lt  p gt  x000D       lt p class  comment  gt  Something  lt  p gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

if the last element type is article too  last-of-type will not work as expected   maybe i not really understand how it work   demo

User · Answer

I guess that the most correct answer is  Use  nth-child  or  in this specific case  its counterpart  nth-last-child   Most only know this selector by its first argument to grab a range of items based on a calculation with n  but it can also take a second argument  of  any CSS selector     Your scenario could be solved with this selector   commentList  comment nth-last-child 1 of  comment   But being technically correct doesn t mean you can use it  though  because this selector is as of now only implemented in Safari   For further reading    https   drafts csswg org selectors-4  the-nth-child-pseudo http   caniuse com  search nth-child

User · Answer

What about this solution   div commentList  gt  article comment not  last-child  last-of-type       color red    or whatever

User · Answer

If you are floating the elements you can reverse the order  i e  float  right  instead of float  left   And then use this method to select the first-child of a class      1  Apply style to ALL instances     header  some-class     padding-right  0       2  Remove style from ALL instances except FIRST instance     header  some-class  some-class     padding-right  20px      This is actually applying the class to the LAST instance only because it s now in reversed order   Here is a working example for you    lt  doctype html gt   lt head gt  lt title gt CSS Test lt  title gt   lt style type  text css  gt   some-class   margin  0  padding  0 20px  list-style-type  square     lfloat   float  left  display  block     rfloat   float  right  display  block       apply style to last instance only     header  some-class     border  1px solid red    padding-right  0     header  some-class  some-class     border  0    padding-right  20px     lt  style gt   lt  head gt   lt body gt   lt div id  header  gt     lt img src  some image  title  Logo  class  lfloat no-border   gt     lt ul class  some-class rfloat  gt       lt li gt List 1-1 lt  li gt       lt li gt List 1-2 lt  li gt       lt li gt List 1-3 lt  li gt     lt  ul gt     lt ul class  some-class rfloat  gt       lt li gt List 2-1 lt  li gt       lt li gt List 2-2 lt  li gt       lt li gt List 2-3 lt  li gt     lt  ul gt     lt ul class  some-class rfloat  gt       lt li gt List 3-1 lt  li gt       lt li gt List 3-2 lt  li gt       lt li gt List 3-3 lt  li gt     lt  ul gt     lt img src  some other img  title  Icon  class  rfloat no-border   gt   lt  div gt   lt  body gt   lt  html gt

[html] CSS last-child selector: select last-element of specific class, not last child inside of parent?

Examples related to html

Examples related to css

Examples related to css-selectors