JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="foo">
  <li data-color="red"><a href="">1</a>
    <ul>
      <li data-color="green"><a href="">2</a>
        <ul>
          <li data-color="#800080"><a href="">3</a>
            <ul>
              <li data-color="green"><a href="">4</a>
                <ul>
                  <li><a href="">5</a>
                  </li>
                  ....
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="">1.1</a></li>
</ul>

CSS

ul {
   list-style-type: none;

}
li a {
  padding: .5em;
  font-weight: bold;
  color: white;
}

JavaScript

function paintEmAll(selector) {
  var defaultColor = 'orange';
  Array.prototype.forEach.call(
    document.querySelector(selector).querySelectorAll('li a'),
    function (li) {
      var parentColor = li.closest('[data-color]')
      li.style.backgroundColor = parentColor ? parentColor.dataset.color : defaultColor
    }
  )
}


paintEmAll('ul.foo')