Skip to main content
conteúdo editado
Fonte Link
Joao Paulo
  • 12mil
  • 26
  • 89
  • 153

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 corretamentocorretamente.

Estou enganado sobre o comportamento? Como corrigir?

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 corretamento.

Estou enganado sobre o comportamento? Como corrigir?

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?

Fonte Link
Joao Paulo
  • 12mil
  • 26
  • 89
  • 153

Problema com nth-child

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 corretamento.

Estou enganado sobre o comportamento? Como corrigir?