Le « nth-of-type » CSS peut-il être limité aux éléments avec une classe spécifique ?

Limiter CSS 3 nième de type à une classe spécifique

Question :

Existe-t-il un moyen d'affiner le sélecteur de nième type de CSS 3 pour cibler uniquement les éléments d'un domaine spécifique ? classe ?

Contexte :

Considérez un scénario avec des sections dynamiques présentant des dispositions variées désignées par des classes distinctes. Le but est de mettre en évidence une section sur trois avec la classe ".module" sans affecter les autres éléments.

Solution :

Malheureusement, il n'existe pas de moyen natif de y parvenir en utilisant le nième de type. La raison en est que le nième de classe n'est pas pris en charge en CSS. Par conséquent, limiter le nième de type à une classe n'est pas possible.

Comme alternative, il est nécessaire d'ajouter manuellement une nouvelle classe, telle que ".third-module", à chaque troisième section avec le Classe ".module". Cette classe personnalisée peut ensuite être ciblée à l'aide du nième de type.

HTML :

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

CSS :

.featured {
  width: 31%;
  margin: 0 0 20px 0;
  padding: 0 3.5% 2em 0;
  float: left;
  background: #ccc;
}

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

.featured.video {
  width: auto;
  padding: 0 0 2em 0;
  float: none;
}

Cette solution garantit que seules les sections ".module" avec la classe ".third-module" reçoivent le style souhaité, car elles sont spécifiquement ciblées par le nième sélecteur de type.

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!