nth-of-type ne se comporte pas correctement avec les classes de ciblage dans la liste des différents éléments

Question

J'ai une instance où j'ai un élément avec une classe de .card-one et je veux appliquer une classe à chaque élément pair. Cela fonctionne bien mais j'ai aussi d'autres divs avec .card-one imbriqués à l'intérieur d'eux et je ne veux pas que ceux-ci soient comptés.

J'ai essayé de cibler les éléments en tant que descendants directs du conteneur parent en utilisant le css ci-dessous mais cela ne fonctionne pas.

.all-cards > .card-one:nth-of-type(even){ color: red; } 

Voici un exemple de ce qui se passe. https://jsfiddle.net/sz5z4k58/

Answer 1

Le sélecteur nth-of-type ne se réfère pas à la classe , mais le type , à savoir l'étiquette , dans votre cas, le div et que dans son élément parent. Ainsi, votre sélecteur de type n-de-type sélectionne réellement chaque seconde DIV à l'intérieur d'un parent s'il a la classe spécifiée.

c'est légèrement déroutant et pas ce que l'on pourrait attendre du nom, mais c'est ainsi que ça fonctionne ...