Comment puis-je utiliser CSS « ​​nth-of-type » pour sélectionner des éléments en fonction de la position et de la classe ?

CSS 3 nième de type : limitation à des classes spécifiques

Le sélecteur de nième de type de CSS 3 permet aux développeurs de sélectionner des éléments en fonction sur leur position au sein d’une fratrie. Cependant, il présente actuellement une limitation lorsqu'il s'agit de sélectionner des éléments en fonction de leur classe.

Plus précisément, nth-of-type prend en compte tous les éléments frères, quelle que soit leur classe, lors de la détermination de la position de l'élément. Cela signifie que si vous souhaitez sélectionner un élément sur trois avec une classe spécifique, le nième de type seul ne peut pas y parvenir.

Par exemple, dans le HTML fourni, vous souhaitez sélectionner un élément sur trois avec la classe ".module". Cependant, l'utilisation de ".featured.module:nth-of-type(3n 3)" sélectionnera également l'élément ".featured.video" car il s'agit également du troisième frère dans l'ensemble.

Solution

Malheureusement, compte tenu des limitations actuelles de CSS, il n'existe aucun moyen direct de restreindre le nième de type à une classe spécifique. Pour contourner le problème, vous pouvez envisager d'ajouter manuellement une classe unique, telle que « .module3 » ou « .module6 », à un élément « .module » sur trois. Cela vous permettrait d'utiliser le nième de type pour sélectionner en fonction de la classe unique.

Remarque : le nième de classe n'est pas un sélecteur valide dans CSS 3, qui est pourquoi il n'est pas possible de l'utiliser comme solution.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!