Selecting the last element among various nested containers

Question

How can I select the last and deepest element in CSS?

Is there a way to improve this css code?

What solution do you proposed for a deep tree? (~15-25).

I'm avoiding using javascript. But SASS solutions are welcome.(maybe using @for?)

 /*level 1*/ div.case > ul:last-child > li.leaf:last-child > div { font-weight: bold; background: red; } /*level 2*/ div.case > ul:last-child > li.expanded:last-child > ul > li.leaf:last-child { font-weight: bold; background: blue; } /*level 3*/ div.case > ul:last-child > li.expanded:last-child > ul > li.expanded:last-child > ul > li.leaf:last-child { font-weight: bold; background: green; } /*level 4*/ div.case > ul:last-child > li.expanded:last-child > ul > li.expanded:last-child > ul > li.expanded:last-child > ul > li.leaf:last-child { font-weight: bold; background: yellow; } 

 <div class="case"> <h1>Case 0</h1> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> <li class="expanded"> <div>2. content</div> <ul> <li class="leaf"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> </ul> </li> <li class="leaf"> <div>3. content (bold)</div> </li> </ul> </div> <div class="case"> <h1>Case 1</h1> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> <li class="expanded"> <div>2. content</div> <ul> <li class="leaf"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> </ul> </li> <li class="expanded"> <div>3. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> <li class="leaf"> <div>3. content (bold)</div> </li> </ul> </li> </ul> </div> <div class="case"> <h1>Case 2</h1> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> <li class="leaf"> <div>2. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> <li class="leaf"> <div>3. content</div> </li> </ul> </li> <li class="expanded"> <div>3. content</div> <ul> <li class="expanded"> <div>1. content a</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content (bold)</div> </li> </ul> </li> </ul> </li> </ul> </div> <div class="case"> <h1>Case 3</h1> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> <li class="expanded"> <div>2. content</div> <ul> <li class="leaf"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> </ul> </li> <li class="expanded"> <div>3. content</div> <ul> <li class="expanded"> <div>2. content</div> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content (bold)</div> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> <div class="case"> <h1>Case 4</h1> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> <li class="expanded"> <div>2. content</div> <ul> <li class="expanded"> <div>2. content</div> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> </ul> </li> </ul> </li> <li class="expanded"> <div>3. content</div> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content(bold)</div> </li> </ul> </li> </ul> </li> </ul> </div> <div class="case"> <h1>Case 5</h1> <ul> <li class="leaf"> <div>content 1</div> </li> <li class="leaf"> <div>content 2</div> </li> <li class="leaf"> <div>content 3(bold)</div> </li> </ul> </div> 

Answer 1

If I understand your question correctly, you want to target the last li tag in multiple ul s, where the number of nesting levels in the ul s 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 li s that have no descendant li s, 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).}