Selecting the last element among various nested containers

by

If I understand your question correctly, you want to target the last li tag in multiple uls, where the number of nesting levels in the uls is unpredictable.

You want a selector that targets the “last and deepest element” in a containing block where the number of elements preceding it in the block are unknown and irrelevant.

This doesn’t appear to be possible with Selectors 2.1 or Selectors 3.

The :last-child, :last-of-type and nth-child pseudo-classes work when the nesting levels are fixed. In a dynamic environment where there are multiple lists of varying nesting levels these selector rules will break.

This will select the last li in the first level ul:

div.case > ul > li:last-child

This will select the last li in the second level ul:

div.case > ul > li:last-child > ul > li:last-child

This will select the last li in the third level ul:

div.case > ul > li:last-child > ul > li:last-child > ul > li:last-child

and so on…

A solution, however, may exist in Selectors 4, which browsers haven’t yet implemented:

li:last-child:not(:has(> li))

This rule targets last child lis that have no descendant lis, which matches your requirement.

For now, however, if you know the nesting level for each of your ul containers you can apply a class to each targeted li.

Thanks @BoltClock for help crafting the Selectors 4 rule (see comments).

More Related Contents:

  1. Understanding CSS selector priority / specificity
  2. CSS Pseudo-classes with inline styles
  3. CSS negation pseudo-class :not() for parent/ancestor elements
  4. How can I select the last element with a specific class, not last child inside of parent?
  5. Are class names in CSS selectors case sensitive?
  6. Why doesn’t table > tr > td work when using the child selector?
  7. CSS selector by inline style attribute
  8. Matching the first/nth element of a certain type in the entire document
  9. :last-child not working as expected?
  10. Using CSS :before and :after pseudo-elements with inline CSS?
  11. :nth-child(even/odd) selector with class [duplicate]
  12. How to CSS: select element based on inner HTML [duplicate]
  13. What is the performance impact of the universal selector?
  14. What are the priorities among CSS selectors
  15. Why is nth-child selector not working?
  16. CSS selector with period in ID
  17. Can a ::before selector be used with a ?
  18. Is it possible to use CSS vars in CSS3 selectors?
  19. What is the ::content/::slotted pseudo-element and how does it work?
  20. CSS Selector “(A or B) and C”?
  21. Why does the general-sibling combinator allow toggling pseudo-element’s content, but not the adjacent-sibling?
  22. How do I select an element that has a certain class?
  23. Is there a reason to use a instead of a:link or a:visited in my stylesheet?
  24. Zebra striping a flexbox table with wrapping items
  25. CSS attribute selector does not work a href
  26. How to use nth-child for styling with a table with rowspan?
  27. CSS Selector for No-Children-But-Not-Empty
  28. How to select classes with spaces
  29. CSS nth-match doesn’t work
  30. Targeting text nodes with CSS

Leave a Comment