David
A [related question](https://topanswers.xyz/webclient?q=1048) asks about styling the "last `<li>`" of a set of arbitrarily nested `<ol|ul>` lists, with the assumption that the "outer" list "nests" the whole set.
This question is rather how to accomplish the analogous task of styling the **bottom** of the nested lists, when the outer list does *not* contribute the last `li` element. Here's an example:
```
<ol>
<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
<ol>
<li>Thing 1</li>
<li>Thing 2</li>
<li>Thing 3</li>
</ol>
</li>
<li>Sub-Item 3</li>
<li>Sub-Item 4</li>
</ol>
</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</li>
</ol>
```
Given that (kind of) arrangement, how would "Item 5" (the "bottom-most" LI element) get targetted with CSS, making no assumptions about the depth of the "nest" nor the sequence of `ol`s and `ul`s?
I'm interested in a CSS-only answer, but *any* answers (even involving some javascript) would be welcome.
I haven't even come close, but [this jsfiddle][j] provides a starting point.
[j]: https://jsfiddle.net/dajare/fu3gbnvz/
Top Answer
Jack Douglas
I [don't think this is possible](https://stackoverflow.com/a/3757416/12757754) with css alone, but it is simple in JavaScript using [`querySelectorAll`](https://www.w3.org/TR/selectors-api/#queryselectorall) because:
> The `querySelectorAll()` methods on the `Document`, `DocumentFragment`, and `Element` interfaces must return a `NodeList` containing all of the matching `Element` nodes within the subtrees of the context node, ***in document order***[^1].
And "document order" [means](https://www.w3.org/TR/selectors-api/#document-order):
> …a depth-first pre-order traversal of the DOM tree or subtree in question.
So the last element of the returned `NodeList` is the element you want to style. For example:
```javascript
const nodes = document.querySelectorAll('li');
nodes[nodes.length-1].classList.add('last');
```
```css
.last { border: thin solid blue; }
```
[fiddle](https://jsfiddle.net/7ehv4fst)
[^1]: emphasis mine