David
I have the scenario of having a set of nested lists, of arbitrary depth and type. That is, it could be `ul` inside `ol`, or vice-versa, or `ul` inside `ul`, or `ol` inside `ol`. To any (not infinite!) depth, nested at any point.
What I want to do is style the bottom of the outer list **only**. I cannot work out how to do this, if the "descenders" are not known in advance, nor whether the "outer" is a `ul` or `ol`, without making any assumptions about where it comes in the DOM. So, for an example, consider this set of nested lists:
```html
<ul>
<li>Category 1</li>
<li>Category 2
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ol>
<li>Sub-Item 1</li>
<li>Sub-Item 2
<ul>
<li>Thing 1</li>
<li>Thing 2</li>
<li>Thing 3</li>
</ul>
</li>
<li>Sub-Item 3</li>
</ol>
</li>
<li>Item 4</li>
</ul>
</li>
<li>Category 3</li>
</ul>
```
What I have been trying to do is target ONLY the last `<li>` = "Category 3" in the example above—without making *any* assumptions about what is going on around it.
I have searched for hours (not an exaggeration!) on this and tried many possibilities that have all failed in one way or another.
The **best** I have done is to make one assumption: that the "outer" list is the descendant of some container `div`, and with that assumption in place, then the briefest CSS I have come up with that targets the `<li>Category 3</li>` element is this:
```css
div>ul>li:last-child,
div>ol>li:last-child {
color: #f00;
}
```
And [that works (jsfiddle)][1]. But is there a way of targeting the "last-child"in a set of nested lists of arbitrary depth without making *any* assumptions (and no classes)? That was the solution I was hoping to find but, so far, have failed to find.
**N.b.** This Q does make one further assumption: that the "outer" list also contributes the last `<li>...</li>` in the sequence. This [related question][2] asks about the scenario where that is not the case. (And if the list is NOT nested, that's fine: the very-last `li` should always have this styling.)
[1]: https://jsfiddle.net/dajare/kx2vduLr/52/
[2]: https://topanswers.xyz/webclient?q=1053
Top Answer
James Douglas
Another potential answer, making no assumptions except correct use of HTML^[https://stackoverflow.com/a/5899394/7733026], would be this:
```css
:not(li) > ul > li:last-child,
:not(li) > ol > li:last-child {
color: #f00;
}
```
[JSFiddle](https://jsfiddle.net/dgok0arb/)
Answer #2
Jack Douglas
Because we are assuming the final `li` in the outer list has no child elements, you can set all the `li:last-child` elements, and then unset those that are nested:
```css
li:last-child { color: #f00; }
li li:last-child { color: unset; }
```
[jsfiddle](https://jsfiddle.net/knxa75q3)