ul-li-alternation-color
ul-li-alternation-color
HTML
<ul class="top-list">
<li><div>Пункт 1</div>
<ul>
<li><div>Пункт 1.1</div>
<ul>
<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>
<li><div>Пункт 1.1.5</div></li>
</ul>
</li>
<li><div>Пункт 1.2</div></li>
</ul>
</li>
<li><div>Пункт 2</div>
<ul>
<li><div>Пункт 2.1</div>
<ul>
<li><div>Пункт 2.1.1</div></li>
<li><div>Пункт 2.1.2</div></li>
<li><div>Пункт 2.1.3</div></li>
<li><div>Пункт 2.1.4</div></li>
</ul>
</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>
<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
}
.top-list > li:nth-of-type(odd) > div,
.top-list > li:nth-of-type(odd) li:nth-of-type(even) > div,
.top-list > li:nth-of-type(even) li:nth-of-type(odd) > div,
.top-list > li:nth-of-type(odd) ul ul li:nth-of-type(odd) > div,
.top-list > li:nth-of-type(even) ul ul li:nth-of-type(even) > div{
background: red;
}
.top-list > li:nth-of-type(even) > div,
.top-list > li:nth-of-type(odd) li:nth-of-type(odd) > div,
.top-list > li:nth-of-type(even) li:nth-of-type(even) > div,
.top-list > li:nth-of-type(odd) ul ul li:nth-of-type(even) > div,
.top-list > li:nth-of-type(even) ul ul li:nth-of-type(odd) > div{
background: yellow;
}
JavaScript
var div = document.getElementsByTagName('DIV')
for(var i = 0; i < div.length; i++) {
if(i % 2 == 0) {div[i].style.backgroundColor = 'red'}
else {
div[i].style.backgroundColor = 'yellow'
}
}