How do I select the last child with a specific class name in CSS

Question

lt ul gt       lt li class  list  gt test1 lt  li gt       lt li class  list  gt test2 lt  li gt       lt li class  list  gt test3 lt  li gt       lt li gt test4 lt  li gt   lt  ul gt    How do I select the  last child  with the class name  list    lt style gt      ul li list last-child background-color  000    lt  style gt    I know the example above doesn t work  but is there anything similar to this that does work   IMPORTANT   a  I can t use ul li nth-child 3   because it could happen that it s on the fourth or fifth place too   b  No JavaScript

User · Answer

This is a cheeky answer  but if you are constrained to CSS only and able to reverse your items in the DOM  it might be worth considering  It relies on the fact that while there is no selector for the last element of a specific class  it is actually possible to style the first  The trick is to then use flexbox to display the elements in reverse order    x000D   x000D  ul   x000D    display  flex  x000D    flex-direction  column-reverse  x000D    x000D   x000D     Apply desired style to all matching elements     x000D  ul  gt  li list   x000D    background-color   888  x000D    x000D   x000D     Using a more specific selector   unstyle  elements which are not the first     x000D  ul  gt  li list   li list   x000D    background-color  inherit  x000D    x000D   lt ul gt  x000D     lt li class  list  gt 0 lt  li gt  x000D     lt li gt 1 lt  li gt  x000D     lt li class  list  gt 2 lt  li gt  x000D   lt  ul gt  x000D   lt ul gt  x000D     lt li gt 0 lt  li gt  x000D     lt li class  list  gt 1 lt  li gt  x000D     lt li class  list  gt 2 lt  li gt  x000D     lt li gt 3 lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

You can use the adjacent sibling selector to achieve something similar  that might help    list-item other-class    list-item not  other-class    Will effectively target the immediately following element after the last element with the class other-class   Read more here  https   css-tricks com almanac selectors a adjacent-sibling

User · Answer

You can t target the last instance of the class name in your list without JS   However  you may not be entirely out-of-css-luck  depending on what you are wanting to achieve  For example  by using the next sibling selector  I have added a visual divider after the last of your  list elements here  http   jsbin com vejixisudo edit html css output

User · Answer

This can be done using an attribute selector    class   list   last-of-type        background   000      The class  selects a specific whole word  This allows your list item to have multiple classes if need be  in various order  It ll still find the exact class  list  and apply the style to the last one   See a working example here  http   codepen io chasebank pen ZYyeab  Read more on attribute selectors   http   css-tricks com attribute-selectors  http   www w3schools com css css attribute selectors asp

User · Answer

I suggest that you take advantage of the fact that you can assign multiple classes to an element like so    lt ul gt       lt li class  list  gt test1 lt  li gt       lt li class  list  gt test2 lt  li gt       lt li class  list last  gt test3 lt  li gt       lt li gt test4 lt  li gt   lt  ul gt    The last element has the list class like its siblings but also has the last class which you can use to set any CSS property you want  like so   ul li list       color   FF0000     ul li list last       background-color   000

User · Answer

class     this  length - 1     or      p    last   addClass   selected

[css] How do I select the "last child" with a specific class name in CSS?

Examples related to css

Examples related to css-selectors