observem o html e o css abaixo.
Esse é o css inicial
ul ul li:nth-last-of-type(2){
background: #ff0000;
}
<ul>
<li>bla
<ul>
<li>bla bla
<ul>
<li>bla bla bla</li>
<li>Gostaria que não fosse selecionado</li>
<li>bla bla bla</li>
</ul>
</li>
<li>Selecionado</li>
<li>bla bla</li>
</ul>
</li>
<li>bla
<ul>
<li>Selecionado</li>
<li>bla bla</li>
</ul>
</li>
<li>bla</li>
</ul>
A solução manual seria fazer isso
ul ul ul li:nth-last-of-type(2){
background: initial;
}
Mas não queria fazer assim. Supondo que se eu acrescentasse ao ul mais profundo na hierarquia o li abaixo.
<li>
bla bla bla
<ul>
<li>Agora esse não deve mais ser selecionado</li>
<li>Bla bla bla bla</li>
</ul>
</li>
ul ul ul ul li:nth-last-of-type(2){
background: initial;
}
Ou seja, esse css não é sustentável. A cada novo nó no ul mais profundo terei de dar manutenção no css toda vez, acrescentando um novo ul na hierarquia para reiniciar a propriedade. Como faço para ele ficar dinâmico?