Skip to main content
3 de 4
adicionou 8 caracteres ao conteúdo
Maniero
  • 484,5mil
  • 94
  • 1,3mil
  • 2,2mil

Não selecionar dinamicamente sempre o último li na hierarquia

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?

rplaurindo
  • 230
  • 2
  • 7