7

Tenho o seguinte cenário:

HTML:

<div class='linha visivel'>Visivel</div>
<div class='linha visivel'>Visivel</div>
<div class='linha oculto' style='display:none'>Invisivel</div>
<div class='linha visivel'>Visivel</div>

CSS:

.visivel:nth-child(odd) { background: yellow }
.visivel:nth-child(even) { background: green }

Resultado encontrado:

inserir a descrição da imagem aqui

  • 1º linha com classe visivel AMARELA
  • 2º linha com classe visivel VERDE
  • 3º linha com classe visivel VERDE

Resultado esperado:

inserir a descrição da imagem aqui

  • 1º linha com classe visivel AMARELA
  • 2º linha com classe visivel VERDE
  • 3º linha com classe visivel AMARELA

http://jsfiddle.net/vk6xqnhb/

Pelo que eu entendo, o nth-child deveria pintar alternadamente as divs com a classe visivel. Mas como há uma div oculta no meio ele acaba não fazendo isso corretamente.

Estou enganado sobre o comportamento? Como corrigir?

3
  • A mesma dúvida que você tem: stackoverflow.com/questions/26057925/… (Solução marcada) Commented 27/02/2015 às 17:52
  • O comportamento é este mesmo, pois o seletor funciona com base nos nós do DOM e não se aplica somente ao que é selecionado pelo CSS. O que você poderia fazer neste caso é pintar as linhas usando JavaScript, por exemplo.
    – utluiz
    Commented 27/02/2015 às 17:55
  • Eu conseguiria fazer com jQuery, mas estava justamente tentando evitar.
    – Joao Paulo
    Commented 27/02/2015 às 17:55

2 Respostas 2

3

Baseado nos comentários e na resposta do SO em inglês não tive outra solução a não ser usar o jQuery:

 $(".visivel:even").css("background-color", "green");
 $(".visivel:odd").css("background-color", "yellow");

Comentário do @utluiz sobre o comportamento "inesperado":

O comportamento é este mesmo, pois o seletor funciona com base nos nós do DOM e não se aplica somente ao que é selecionado pelo CSS.

3
  • Poderia explicar, pelo menos, porque o comportamento ocorre? .__. Commented 27/02/2015 às 18:04
  • Porque o seletor nth-child seleciona as divs de acordo com o pai. Como o pai de todas as divs é o mesmo (body), a div invisível é contada por ter o mesmo pai das outras.
    – mutlei
    Commented 27/02/2015 às 18:06
  • Dê uma olhada na minha resposta
    – mutlei
    Commented 27/02/2015 às 18:48
1

Sobre o funcionamento do nth-child(odd) e nth-child(even): Quando se coloca even e odd vai colorir as linhas pares e ímpares, respectivamente.

Outro modo de fazer, sem usar jQuery, é você criar uma div e colocar todos os elementos dentro dela (de acordo com essa resposta):

.todas {
  line-height: 1.2em;  
  background-color: yellow; 
  background-image: linear-gradient(transparent 50%, green 50%);
  background-size: 100% 2.4em;
}
<div class="todas">
  <div class='linha visivel'>Visivel</div>
  <div class='linha visivel'>Visivel</div>
  <div class='linha oculto' style='display:none'>Invisivel</div>
  <div class='linha visivel'>Visivel</div>
</div>

2
  • Mas o nth-child está vinculado a classe "visível", ele não deveria computar essa div com display:none pois ela não tem a classe "visivel", isso que é estranho
    – Joao Paulo
    Commented 2/02/2017 às 20:15
  • 1
    @JoaoPaulo o nth-child e nth-of-type são tratados no elemento, e não na classe. algo.classe:nth-of-type() e algo:nth-of-type().classe são sinônimos (independente da omissão do algo). Os nth são computados primeiro em qualquer uma das duas formas, e só depois é considerada a classe. Se pretende mudar em JS a condição hidden ou não, uma gambiarra seria usar duas tags diferentes, em vez de mudar a classe dinamicamente (alternar entre span e div em vez de mudar o display: e definir o span como sendo o invisivel). Mas isso só é válido se a semântica da parte oculta não for relevante.
    – Largato
    Commented 2/02/2017 às 21:24

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 .