JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="first-color">
    <li><div>Пункт 1</div>
        <ul class="second-color">
            <li><div>Пункт 1.1</div>
                <ul class="first-color">
                    <li><div>Пункт 1.1.1</div></li>
                    <li><div>Пункт 1.1.2</div></li>
                    <li><div>Пункт 1.1.3</div></li>
                    <li><div>Пункт 1.1.4</div></li>                    
                </ul>
            </li>
            <li><div>Пункт 1.2</div></li>
        </ul>
    </li>
    <li><div>Пункт 2</div>
        <ul class="first-color">
            <li><div>Пункт 2.1</div></li>
            <li><div>Пункт 2.2</div></li>
            <li><div>Пункт 2.3</div></li>
            <li><div>Пункт 2.4</div></li>
        </ul>
    </li>
    <li><div>Пункт 3</div>
        <ul class="second-color">
            <li><div>Пункт 3.1</div></li>
            <li><div>Пункт 3.2</div></li>
        </ul>
    </li>
</ul>

CSS

ul {
   list-style: none; 
}
ul > li {
    border: 1px #000 solid;
    margin: 5px 0 5px 20px
}
ul.first-color > li:nth-of-type(2n+1) > div, ul.second-color > li:nth-of-type(2n) > div{
    background: red;
}
ul.first-color > li:nth-of-type(2n) > div, ul.second-color > li:nth-of-type(2n+1) > div{
    background: yellow;
}