Le CSS « ​​nth-of-type » peut-il sélectionner des éléments en fonction d'une classe spécifique ?

Le CSS 3 nième de type peut-il être limité à une classe ?

Dans CSS 3, le sélecteur nième de type peut être utilisé pour sélectionner des éléments spécifiques en fonction de leur position dans un groupe d'éléments similaires. Cependant, ce sélecteur ne permet pas de cibler des éléments en fonction de leur classe.

Question :

Est-il possible d'appliquer le nième de type à une classe spécifique ? Par exemple, comment pouvez-vous cibler un élément sur trois avec la classe .module ?

Réponse :

Malheureusement, CSS ne fournit pas de nième de- sélecteur de classe. Cela signifie qu'il n'est pas directement possible de restreindre le nième de type à une classe particulière.

Solution :

Pour obtenir l'effet souhaité, vous pouvez appliquer un nouveau classe à un .module sur trois manuellement. Cela peut être fait en utilisant JavaScript ou un préprocesseur comme Sass.

Voici un exemple utilisant JavaScript :

const modules = document.querySelectorAll('.featured.module');
for (let i = 2; i < modules.length; i += 3) {
  modules[i].classList.add('module--nth-of-type-3n');
}

Une fois la classe supplémentaire appliquée, vous pouvez utiliser la règle CSS suivante pour cibler tous les trois .module :

.featured.module.module--nth-of-type-3n {
  /* Your desired styling here */
}

Bien que cette solution de contournement ne soit peut-être pas aussi élégante qu'un sélecteur de nième de classe dédié, elle vous permet d'obtenir la fonctionnalité souhaitée en utilisant les fonctionnalités CSS et JavaScript existantes.

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!