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:
- 1º linha com classe visivel AMARELA
- 2º linha com classe visivel VERDE
- 3º linha com classe visivel VERDE
Resultado esperado:
- 1º linha com classe visivel AMARELA
- 2º linha com classe visivel VERDE
- 3º linha com classe visivel AMARELA
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?