css стиль чередующихся строк в многоуровневом ul

Question

Что бы я хотел иметь:

Представьте себе таблицу с чередующимся цветом строк. Это моя общая цель. Но по причинам мне нужно отображать данные в виде дерева с n уровнями. Но с точки зрения дизайна, он все равно должен выглядеть как таблица с чередующимися цветами строк. В основном лучшее из двух миров.

Чего я добился

Поскольку каждый уровень имеет свои собственные теги ul / li, селектор nth-child (nth-child из parent ) не решает мою проблему. Поскольку каждый уровень в каждом поддереве имеет свой собственный стиль чередующихся строк, цвета конфликтуют с другими уровнями. На это просто не круто смотреть.

CSS Я использую:

li:nth-child(odd)>div {
  background-color: lightblue;
}

Как можно решить эту проблему с помощью CSS?

Для более сложного тестирования Я создал более сложное дерево.

JSFiddle

https://jsfiddle.net/yshk8dbg/

Answer 1

Просто добавьте id к вам root ul, чтобы сделать ваши css более точными:

#tree > li:nth-child(2n + 1) > div {
  background-color: lightblue;
}

<ul id="tree">
  <li>
    <div>AAAA</div>
    <ul>
      <li>
        <div>Node 1</div>
      </li>
      <li>
        <div>Node 3</div>
      </li>
      <li>
        <div>Node 3</div>
      </li>
      <li>
        <div>Node 4</div>
      </li>
    </ul>
  </li>
  <li>
    <div>BBBB</div>
  </li>
  <li>
    <div>CCCC</div>
    <ul>
      <li>
        <div>Node 1</div>
      </li>
      <li>
        <div>Node 3</div>
      </li>
    </ul>
  </li>
</ul>