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?