css add tag
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)

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.