How do I select the “last child” with a specific class name in CSS? [duplicate]

by

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

More Related Contents:

  1. Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
  2. How do I select an element based on the state of another element in the page with CSS?
  3. Can the :not() pseudo-class have multiple arguments?
  4. Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS?
  5. Can I target a :before or :after pseudo-element with a sibling combinator?
  6. CSS selector – element with a given child [duplicate]
  7. What does a[href^=”…”] do in CSS?
  8. In CSS what is the difference between “.” and “#” when declaring a set of styles? [duplicate]
  9. Universal selector * and pseudo elements
  10. Can I have multiple :before pseudo-elements for the same element?
  11. How to only show certain parts with CSS for Print?
  12. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  13. Are parentheses allowed in CSS selectors?
  14. Why use an attribute selector to match classes?
  15. Is it possible to use a CSS wildcard in the middle of an attribute selector?
  16. CSS selector to get deepest element of specific class in the HTML tree
  17. Can type selectors be repeated to increase specificity?
  18. CSS Specificity and Inheritance
  19. The use of /deep/ and >>> in Angular 2
  20. Select nth-child across multiple parents
  21. Vertically centering content of :before/:after pseudo-elements
  22. Difference between the selectors div + p (plus) and div ~ p (tilde)
  23. Are CSS selectors case-sensitive?
  24. Can you target an element with CSS only if 2 classes are present?
  25. CSS combinator precedence?
  26. What is caret symbol ^ used for in css when selecting elements?
  27. What is the difference between p:nth-child(2) and p:nth-of-type(2)?
  28. CSS specificity or inheritance?
  29. CSS class repetition to increase specificity
  30. select second child

Leave a Comment