Comment puis-je sélectionner des éléments spécifiques avec le même nom de classe en fonction de leur position dans HTML ?

Sélection d'éléments avec un nom de classe donné en fonction de la position

Dans votre document HTML, vous avez défini une classe appelée "maclasse" qui s'applique à plusieurs éléments. Vous souhaitez sélectionner le premier, le deuxième ou le troisième élément avec cette classe, quelle que soit leur position dans le balisage.

Pour y parvenir sans utiliser JavaScript ou jQuery, vous pouvez utiliser des pseudo-sélecteurs CSS :

1. Utilisation de nth-child(item number)

Ce sélecteur cible le nième élément enfant au sein de son élément parent. Dans votre cas, vous voudriez utiliser :

.parent_class:nth-child(1) { }  // Selects first ".myclass" element
.parent_class:nth-child(2) { }  // Selects second ".myclass" element
.parent_class:nth-child(3) { }  // Selects third ".myclass" element

2. Utilisation du nième de type (numéro d'article)

Ce sélecteur cible la nième occurrence d'un type d'élément donné au sein de son élément parent. Puisque vous souhaitez sélectionner des éléments "div" avec la classe "myclass", vous utiliserez :

.myclass:nth-of-type(1) { }  // Selects first ".myclass" element
.myclass:nth-of-type(2) { }  // Selects second ".myclass" element
.myclass:nth-of-type(3) { }  // Selects third ".myclass" element

En utilisant ces pseudo-sélecteurs, vous pouvez cibler efficacement des éléments spécifiques en fonction de leur position, vous permettant d'appliquer différents styles à chacun selon vos envies.

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!