Is there a more efficient way to handle stylng of multiple ancestor groups?

Question

Is there a more concise styling that can replace the series of ancestors in the CSS of this example? Perhaps one that would not require updating if another level of nesting was added to the HTML of the manager?

Thank you.

---

This is just a poor example of the real HTML which is a navigation menu built on the fly based on the current state of the interface, which is notebooks inside of notebooks. It is intended to make it easier for the user to jump from one location to another without having to step through the menus and nested notebook tabs.

The 'selection' class denotes a terminal li, meaning it has no other content and is a navigation endpoint. The 'sel' class indicates a step along the navigation pathway. I keep the pathways under each decison point even when the parent point is no longer selected, such that the parent can be selected and the full path to its internal terminal li can be loaded.

The red pathways, moving from inside out do not reach a top-level li. The green is the current display because it reaches to the top along the CSS anscestor path.

It may sound a bit odd in this description, but has been working quite well and I'm just trying to improve its appearance and give it a "memory" displayed to the user.

li.sel > div,
li.selection.sel {
 color: red;
}

.manager > ul > li.sel > div,
.manager > ul > li.selection.sel,
.manager > ul > li.sel > ul > li.sel > div,
.manager > ul > li.sel > ul > li.selection.sel,
.manager > ul > li.sel > ul > li.sel > ul > li.sel > div,
.manager > ul > li.sel > ul > li.sel > ul > li.selection.sel,
.manager > ul > li.sel > ul > li.sel > ul > li.sel > ul > li.sel > div,
.manager > ul > li.sel > ul > li.sel > ul > li.sel > ul > li.selection.sel,
.manager > ul > li.sel > ul > li.sel > ul > li.sel > ul > li.sel > ul > li.sel > div,
.manager > ul > li.sel > ul > li.sel > ul > li.sel > ul > li.sel > ul > li.selection.sel {
 color: green;
}

<div class="manager">
<ul>
  <li>
    <div>Group A.1</div>
    <ul>
      <li class="selection">Item 1.1</li>
      <li class="selection">Item 1.2</li>
      <li class="sel">
        <div>Group A.2</div>
        <ul>
          <li class="selection">Item 2.1</li>
          <li class="selection sel">Item 2.2</li>
          <li>
            <div>Group A.3</div>
            <ul>
              <li class="selection">Item 3.1</li>
              <li class="selection">Item 3.2</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="sel">
    <div>Group B.1</div>
    <ul>
      <li class="selection">Item 1.1</li>
      <li class="selection">Item 1.2</li>
      <li class="sel">
        <div>Group B.2</div>
        <ul>
          <li class="selection">Item 2.1</li>
          <li class="selection">Item 2.2</li>
          <li class="sel">
            <div>Group B.3</div>
            <ul>
              <li class="selection sel">Item 3.1</li>
              <li class="selection">Item 3.2</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>    
  <li>
    <div>Group C.1</div>
    <ul>
      <li class="selection sel">Item 1.1</li>
      <li class="selection">Item 1.2</li>
      <li>
        <div>Group C.2</div>
        <ul>
          <li class="selection">Item 2.1</li>
          <li class="selection">Item 2.2</li>
          <li>
            <div>Group C.3</div>
            <ul>
              <li class="selection">Item 3.1</li>
              <li class="selection">Item 3.2</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>      
</ul>       
</div>

Answer 1

This CSS produces the same result. The same pattern will work for any depth.

li.sel > div,
li.selection.sel {
  color: red;
  &:is(.manager *):not(li:not(.sel) *) {
   color: green;
  } 
}

<div class="manager">
<ul>
  <li>
    <div>Group A.1</div>
    <ul>
      <li class="selection">Item 1.1</li>
      <li class="selection">Item 1.2</li>
      <li class="sel">
        <div>Group A.2</div>
        <ul>
          <li class="selection">Item 2.1</li>
          <li class="selection sel">Item 2.2</li>
          <li>
            <div>Group A.3</div>
            <ul>
              <li class="selection">Item 3.1</li>
              <li class="selection">Item 3.2</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="sel">
    <div>Group B.1</div>
    <ul>
      <li class="selection">Item 1.1</li>
      <li class="selection">Item 1.2</li>
      <li class="sel">
        <div>Group B.2</div>
        <ul>
          <li class="selection">Item 2.1</li>
          <li class="selection">Item 2.2</li>
          <li class="sel">
            <div>Group B.3</div>
            <ul>
              <li class="selection sel">Item 3.1</li>
              <li class="selection">Item 3.2</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>    
  <li>
    <div>Group C.1</div>
    <ul>
      <li class="selection sel">Item 1.1</li>
      <li class="selection">Item 1.2</li>
      <li>
        <div>Group C.2</div>
        <ul>
          <li class="selection">Item 2.1</li>
          <li class="selection">Item 2.2</li>
          <li>
            <div>Group C.3</div>
            <ul>
              <li class="selection">Item 3.1</li>
              <li class="selection">Item 3.2</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>      
</ul>       
</div>