observemObservem o htmlHTML e o cssCSS abaixo.
Esse é o cssCSS 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 ulul
mais profundo na hierarquia o lili
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 cssCSS não é sustentável. A cada novo nó no ulul
mais profundo terei de dar manutenção no cssCSS toda vez, acrescentando um novo ulul
na hierarquia para reiniciar a propriedade. Como faço para ele ficar dinâmico?