CSS div alternant la couleur

J’essaie de zébrer mes divs sur mon site Web, cela semble assez simple, mais j’ai trouvé que lorsque j’ai ajouté un en-tête entre les lignes de mes divs, il semble compter l’en-tête dans le style impair / pair

HTML

Title

Content
Content

Title

Content
Content
Content

Title

Content
Content
Content
Content

CSS

 .container { width:600px; margin:0 auto; } .row { line-height:24pt; border: solid 1px black; } .row:nth-child(odd) { background: #e0e0e0; } h3 { line-height:36pt; font-weight:bold; color:blue; } 

violon

J’aurais pensé que le code déjà dans le violon ignorerait fondamentalement l’en-tête et continuerait à se répartir, mais il semble qu’il considère l’en-tête comme un enfant

Ne pas utiliser nth-child , utilisez nth-of-type

 div.container > div:nth-of-type(odd) { background: #e0e0e0; } 

jsFiddle exemple

Vous voulez probablement faire correspondre le type, pas l’enfant.

Utilisez : nth-de type tel que

 .row:nth-of-type(odd) { background: #e0e0e0; } 

La solution la plus simple est bien sûr de simplement envelopper les éléments que vous voulez.

Votre jsFiddle mis à jour

HTML

 

Title

Content
Content

Title

Content
Content
Content

Title

Content
Content
Content
Content

CSS

 .row:nth-child(odd) {background: #e0e0e0;} 

Gardez à l’esprit que si la prise en charge du navigateur est importante pour vous, vous pouvez générer des classes supplémentaires pour le serveur Zebra-Ssortingping.