[Résolu] :nth-child(2n) et :nth-child(2n+1)

Bonjour tout le monde,

Je n'arrive pas à trouvé la solution. J'aimerai que mes éléments <p> soient de couleurs différentes une fois sur deux.. j'utilise :nth-child(2n+1) et :nth-child(2n) pour ça. Sauf que entre mes <p> j'ai des listes. et ça ne marche plus. Pourtant je demande dans mon css, les <p> pas le reste. .

<div class="ListPageLU">
		<p class="ClassementLU">A</p>
			<ul>
				<li>référence A1 </li>
				<li>référence A2</li>
				<li>référence A3</li>
				<li>référence A4</li>
				<li>référence A5</li>
			</ul>
		<p class="ClassementLU">B</p>
			<ul>
				<li>référence B1</li>
			</ul>
		<p class="ClassementLU">C</p>
			<ul>
				<li>référence C1</li>
				<li>référence C1</li>
			</ul>
		<p class="ClassementLU">D</p>
			<ul>
				<li>référence D1</li>
			</ul
	</div>

.ListPageLU p.ClassementLU:nth-child(2n) {
	color:#182334;
}

.ListPageLU p.ClassementLU:nth-child(2n+1) {
	color:#DD5568;
}	

Bonjour,

Je ne m'y connais pas énormément mais j'ai déjà eu plusieurs problème avec des Listes.
Comme dans ton cas.

Pour cela j'utilise :

.ClassementUL:nth-of-type(2n){
/* Ton code */
}
.ClassementUL:nth-of-type(2n+1){
/* Ton code */
}

En essayant de cette manière pour ton cas. Sa marche pour moi.

Des petites aides :
https://css-tricks.com/how-nth-child-works/
https://css-tricks.com/examples/nth-child-tester/

Cordialement Golderen
Modifié par Golderen (01 Jun 2016 - 15:38)

Bonjour Blond1n,

Sinon au lieu des n, dans le cas de un sur deux, tu peux utiliser even et odd qui auront le même effet.

Even = un sur deux en commençant par le second.
Odd = un sur deux en commençant par le premier.

Fonctionnent sur nth-child(), nth-of-type(), nth-last-child() et nth-last-type().

.ListPageLU p.ClassementLU:nth-child(even) {
	color:#182334;
}

.ListPageLU p.ClassementLU:nth-child(odd) {
	color:#DD5568;
}

Modifié par Greg_Lumiere (01 Jun 2016 - 16:20)