Discussion :

[pierrot10]

Bonjour,

Je souhaiterais sélcetionner un élément sur deux.

Pour cela, j'ai essayé

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
.accordeon > h4{
    background-color: #f69d93;
}
 
.accordeon > h4:nth-child(2n){
    background-color: #d47b7b !important;
 
}

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.accordeon > h4:nth-child(odd){
    background-color: #f69d93;
}
 
.accordeon > h4:nth-child(even){
    background-color: #d47b7b !important;
 
}

et vu que ceci ne fonctionnait non plus pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
.accordeon > h4:nth-child(2n){
    background-color: #d47b7b !important;
 
}

je me demande si la cause n'est pas mon HTML que voici.
Est-ce que cela serait parce que le h4 "ne se suivent pas" ?

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<div class="accordeon">
<h4>Titre 1</h4>
<div class="panel" style="display: none;"></div>
<h4>Titre 2</h4>
<div class="panel"></div>
<h4>Titre 3</h4>
<div class="panel" style="display: none;"></div>
<h4>Titre 4</h4>
<div class="panel" style="display: none;"></div>
</div>

[NoSmoking]

Bonjour,

je me demande si la cause n'est pas mon HTML que voici.

oui car la présence de tes éléments <div> décale le comptage.
Il te faudrait modifier ton sélecteur et écrire par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.accordeon > h4:nth-child(4n +1) {
  background-color: #EFD;
}

cela reste risqué car si tu ajoutes un autre élément entre tout va de nouveau se décaler.

Pour éviter cela, tu peux passer par la pseudo-classe :nth-of-type() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.accordeon > h4:nth-of-type(odd) {
  background-color: #FDE;
}
.accordeon > h4:nth-of-type(even){
  background-color: #DEF;
}

PS :
des infos au sujet de cette discussion : Peut-on place une image d'écran si un retour à la ligne

[pierrot10]

Hello
Super, merci beaucoup pour ces informations. Je vais essayer plus tard
Pierre