Oliver Castillo Oliver Castillo - 6 months ago 9
HTML Question

Select the last element in multiple containers with variable levels of nested children

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

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.

I don't believe this is currently possible with CSS2 or CSS3. 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...

The answer to your question, however, may be in Selectors 4, which hasn't been implemented yet.

CSS Selectors Level 4

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

This rule targets last child lis that have no descendant lis. Exactly what you're looking for I believe.

For now, however, if you know the nesting level for each of your ul containers you can apply a class name to each targeted li (simplest solution) or use something similar to my code above. Also check out the :nth-child pseudo-class for a potential solution.


1Credit @BoltClock for assistance in crafting this selector (see comments).