Skip to main content
título editado
Link
rplaurindo
  • 230
  • 2
  • 7

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

adicionou 8 caracteres ao conteúdo
Fonte Link
Maniero
  • 484,5mil
  • 94
  • 1,3mil
  • 2,2mil

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?

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?

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?

conteúdo editado
Fonte Link
rplaurindo
  • 230
  • 2
  • 7

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

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?

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?

Fonte Link
rplaurindo
  • 230
  • 2
  • 7
Carregando