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>Selecionado</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?