Comment puis-je cibler un élément sur trois avec une classe spécifique à l'aide du CSS « ​​nth-of-type » ?

CSS 3 nième de type restreint à la classe

Le sélecteur nième de type vous permet de sélectionner chaque nième enfant d'un type particulier . Cependant, il peut être difficile de limiter cette sélection à une classe spécifique.

Problème :

Vous souhaitez cibler dynamiquement un élément .module sur trois, quel que soit son balisage. . Cependant, nième de type calcule en fonction du type d'élément, pas de la classe.

Solution :

Actuellement, il n'existe aucun moyen direct de limiter le nième de type -type dans une classe spécifique. Une solution de contournement consiste à ajouter manuellement une classe supplémentaire à chaque troisième élément .module.

Par exemple, dans le code HTML fourni :

<section class="featured module">
  <h1>NOT A VIDEO</h1>
</section>

<section class="featured module third">
  <h1>NOT A VIDEO (3)</h1>
</section>

<section class="featured module">
  <h1>NOT A VIDEO</h1>
</section>

<section class="featured module third">
  <h1>NOT A VIDEO (6)</h1>
</section>

Ensuite, appliquez les styles CSS suivants :

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

Cela stylisera désormais une occurrence sur trois de la classe .module avec le .third supplémentaire class.

Remarque :

Cette solution de contournement nécessite une maintenance manuelle lorsque vous ajoutez ou supprimez des éléments .module. Pour des scénarios plus avancés, pensez à utiliser des préprocesseurs JavaScript ou CSS pour générer automatiquement les classes nécessaires.

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!