Comment puis-je restreindre les sélecteurs CSS3 « nth-of-type » à des classes spécifiques ?

Restriction des sélecteurs CSS 3 de nième type aux classes

Comme le montre l'exemple fourni, le sélecteur de nième type de CSS 3 fonctionne en fonction sur les types d’éléments, plutôt que sur des classes spécifiques. Cela peut présenter des défis lorsque vous souhaitez limiter la sélection du nième type à une classe spécifique.

Approche alternative utilisant le nième enfant

Depuis le nième enfant la classe n'existe pas, une solution alternative consiste à utiliser nth-child. Le sélecteur nième enfant sélectionne les éléments en fonction de leur position dans les éléments enfants de leur élément parent.

Voici un CSS modifié :

.featured.module:nth-child(3n+3) {
  padding-right: 0;
  background: red;
}

Dans ce code révisé, au lieu de cibler un nième- de type, nous sélectionnons un élément enfant sur trois qui a la classe "module". Cette approche permet d'obtenir l'effet souhaité en stylisant un élément .module sur trois.

Ajout manuel de classe

Une autre option, comme mentionné dans la solution fournie, consiste à ajouter manuellement un nouvelle classe pour un .module sur trois. Cette approche nécessite plus de travail manuel, mais elle offre un meilleur contrôle sur la sélection des éléments.

N'oubliez pas de modifier votre CSS en conséquence :

.featured.module-third {
  padding-right: 0;
  background: red;
}

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!