Target bottom LI of arbitrarily nested lists, when outer list does NOT provide last LI?
css javascript add tag
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
comments
transcript

Enter question or answer id or url (and optionally further answer ids/urls from the same question) from

Separate each id/url with a space. No need to list your own answers; they will be imported automatically.