Как выбрать последний уровень li во множественной рекурсивной структуре, имеющей неизвестное количество внутренних узлов?

Question

Мне нужно выбрать последний уровень дочернего элемента в структуре, показанной во фрагменте.Здорово, если мы сможем добиться этого с помощью css, но если это невозможно, jquery будет в порядке.

Примечание: я не могу изменить структуру HTML или добавить в нее класс.

ul li:last-child {
        color: #ff0000;
    }

    li {
        color: #000000;
    }

<ul class="root">
   <li>no</li>
   <li>no</li>
   <li>yes</li>
</ul>
<ul class="root">
   <li>no</li>
   <li>no</li>
   <li>
      <ul>
         <li>no</li>
         <li>
            yes
            <ul>
               <li>no</li>
               <li>
                  yes
                  <ul>
                     <li>no</li>
                     <li>
                        yes
                        <ul>
                           <li>no</li>
                           <li>
                              yes
                              <ul>
                                 <li>no</li>
                                 <li>The last one, Only this need to be red!</li>
                              </ul>
                           </li>
                        </ul>
                     </li>
                  </ul>
               </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

Answer 1

Вам нужно будет использовать JS, пока не будет поддержана :has().

Вот один из способов получить самый глубокий <li> и добавить к нему класс:

var items = document.querySelectorAll("li");

items[items.length - 1].classList.add("last");

.last {
  color: red;
}

<ul class="root">
   <li>no</li>
   <li>no</li>
   <li>yes</li>
</ul>
<ul class="root">
   <li>no</li>
   <li>no</li>
   <li>
      <ul>
         <li>no</li>
         <li>
            yes
            <ul>
               <li>no</li>
               <li>
                  yes
                  <ul>
                     <li>no</li>
                     <li>
                        yes
                        <ul>
                           <li>no</li>
                           <li>
                              yes
                              <ul>
                                 <li>no</li>
                                 <li>The last one, Only this need to be red!</li>
                              </ul>
                           </li>
                        </ul>
                     </li>
                  </ul>
               </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>