Precisa de alguma explicação sobre HTML, n-filho
NOTA: VEJA ABAIXO PARA EXPLICAÇÃO CLARA
Estou tentando descobrir por que isso está acontecendo.
HTML
<div class="chicken">
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
</div>
CSS
.chicken { width:100%; background:#999; float:left; }
.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }
.big-chix:nth-child(2n+1) { background-color:#eee; }
.big-chix:nth-child(2n+2) { background-color:#aaa; }
O que eu estou tentando alcançar aqui é colocar um fundo diferente para.big-chix
classe para as crianças nth 1, 3, 5 ... e 2, 4, 6 ...
Mas quando eu coloco um parágrafo (ou qualquer outra coisa como um div, etc), torna-se assim:
HTML
<div class="chicken">
<p>paragraphy</p>
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
</div>
CSS
.chicken { width:100%; background:#999; float:left; }
.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }
.big-chix:nth-child(2n+1) { background-color:#eee; }
.big-chix:nth-child(2n+2) { background-color:#aaa; }
O posicionamento n-filho muda de lugar. Porque isto é assim? Não é.big-chix:nth-child()
apenas supor para selecionar todos os.big-chix
classes (que é 6.big-chix
), defina 1, 3, 5 parabackground-color
do#eee
e 2, 4, 6 a#aaa
?
EDIT: Do que eu entendo,nth-child
não se aplicará a um elemento filho no elemento pai em um código como este:
jsFiddle - n-filho (1) quando<p>
parágrafo é o primeiro elemento
HTML
<div class="chicken">
<p>paragraphy</p> [this is nth-child(1)]
<div class="big-chix">Contento</div> [this is nth-child(2)]
<div class="big-chix">Contento</div> [this is nth-child(3)]
<div class="big-chix">Contento</div> [this is nth-child(4)]
<div class="big-chix">Contento</div> [this is nth-child(5)]
<div class="big-chix">Contento</div> [this is nth-child(6)]
<div class="big-chix">Contento</div> [this is nth-child(7)]
</div>
CSS
.chicken { width:100%; background:#999; float:left; }
.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }
.big-chix:nth-child(1) { background-color:#eee; }
MAS, funcionará em um elemento pai que tenha.big-chix
como o primeiro elemento.
jsFiddle - n-filho com.big-chix
como o primeiro elemento
HTML
<div class="chicken">
<div class="big-chix">Contento</div> [this is nth-child(1)]
<p>paragraphy</p> [this is nth-child(2)]
<div class="big-chix">Contento</div> [this is nth-child(3)]
<div class="big-chix">Contento</div> [this is nth-child(4)]
<div class="big-chix">Contento</div> [this is nth-child(5)]
<div class="big-chix">Contento</div> [this is nth-child(6)]
<div class="big-chix">Contento</div> [this is nth-child(7)]
</div>
CSS
.chicken { width:100%; background:#999; float:left; }
.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }
.big-chix:nth-child(1) { background-color:#eee; }