web-dev-qa-db-fra.com

nième enfant ne répond pas à la classe

Est-il possible de faire fonctionner le pseudo-sélecteur nième enfant avec une classe spécifique?

Voir cet exemple: http://jsfiddle.net/fZGvH/

Je veux que le deuxième DIV.red devienne rouge, mais il n'applique pas la couleur comme prévu.

Non seulement cela, mais lorsque vous spécifiez cela, cela change la 5ème DIV en rouge:

div.red:nth-child(6)

Lorsque vous spécifiez cela, il change le 8ème DIV en rouge:

div.red:nth-child(9)

Il semble que ce soit une DIV derrière. Il n'y a que 8 balises DIV dans l'exemple, donc je ne sais pas pourquoi nth-child (9) fonctionne même. Test avec Firefox 3.6, mais dans mon code de production actuel, le même problème se produit dans Chrome. Je ne comprends pas quelque chose sur la façon dont cela est censé fonctionner, j'aimerais des éclaircissements.

De plus, cela changera la 6ème DIV en rouge, mais ce que je veux vraiment, c'est que cela change la deuxième DIV.red en rouge:

div.red:nth-of-type(6)

Et je ne comprends pas pourquoi nth-child () et nth-of-type () répondent différemment, car il n'y a que huit balises du même type dans le document.

csscss3css-selectors
46
Arne Stephensson

Il n'y a aucun moyen de filtrer par classe en CSS car il n'y a pas de sélecteur :nth-of-class(). Une solution consiste à placer vos deux types différents de div dans leurs propres groupes, puis de les sélectionner en fonction de ces groupes. Par exemple:

<div class="orange">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="red">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Avec ce sélecteur:

div.red div:nth-child(2) {
    background: red;
}

Concernant la dernière partie de votre question:

Et je ne comprends pas pourquoi nth-child () et nth-of-type () répondent différemment, car il n'y a que huit balises du même type dans le document.

Pour le code que vous donnez ne devrait pas être une différence. Je l'ai testé et les deux pseudo-classes fonctionnent comme prévu. Mais en général:

:nth-child() fonctionne sur tout un niveau de frères et sœurs sans tenir compte des autres sélecteurs simples. Ensuite, si le nième enfant ne fait pas partie de ce qui correspond aux sélecteurs simples, rien ne correspond.

:nth-of-type() fonctionne sur un niveau de frères et sœurs du type donné sans tenir compte des autres sélecteurs simples. Ensuite, si le nième élément apparaissant de ce type ne fait pas partie de ce qui correspond aux sélecteurs simples, rien ne correspond.

49
BoltClock

Vous pouvez utiliser le combinateur général de frères et sœurs:

div,
div.red ~ div.red ~ div.red {
  background: gray;
}
div.red ~ div.red {
  background: red;
}

Il est détaillé et vous devez réinitialiser les styles à nouveau, mais il pourrait être utile dans certaines situations spéciales.

Il pourrait être automatisé avec un préprocesseur CSS, et si je comprends bien gzip, puisque la sortie CSS répète simplement le même texte, la taille du fichier gzip ne devrait pas être terriblement grande à moins que vous ne l'utilisiez beaucoup.

6
Jacob R

il y a une solution plus simple que j'ai trouvée pour travailler avec mes divs sans lignes de code spéciales.

.red div:nth-child(6) {background-color:#ccc;}
.red div:nth-child(9) {background-color:#eee;}

fonctionne très bien aussi sans le div en face.

4
chris_r