0

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?

4
  • 3
    Que tal adicionar uma classe nesses li diferentes?
    – Lucas
    Commented 1/10/2014 às 16:54
  • Ia comentar o que o @Lucas disse Commented 1/10/2014 às 16:56
  • 1
    Qual o critério para saber qual deles vai ser o diferente? Talvez seja interessante detalhar o objetivo final, além da forma que está tentando fazer, para não cair num Problema XY.
    – Largato
    Commented 1/10/2014 às 18:08
  • Então pessoal, o critério eu tentei informar na descrição. Sempre o li mais profundo na hierarquia não deverá ser selecionado. Se eu adicionar no HTML, não quero precisar mexer no CSS. Entende?
    – rplaurindo
    Commented 1/10/2014 às 20:13

2 Respostas 2

1

E se você fizesse algo assim?

li > ul > li {
    background: #ff0000;
}

li > ul > li:first-child,
li > ul > li:last-child {
    background: initial;
}
1
  • Vou testar e informo. Obrigado.
    – rplaurindo
    Commented 1/10/2014 às 20:15
1

Use seletores 'id' ou 'class'

html

<li class="lista1">
</li>

ou

<li id="lista2">
</li>

css

.lista1 {color:blue}
'#lista2 {color:green}

Toda vez que você identificar uma tag com esses seletores ele assumira as propriedades do código no css.

Vê se ajuda
http://www.w3schools.com/css/css_selectors.asp

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .