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?
li
diferentes?