Sélecteurs CSS avancés : maîtriser :has(), :is(), :where() et la spécificité
Le CSS n'est plus seulement une collection de styles. Avec les sélecteurs modernes, il est devenu un puissant moteur logique, vous permettant de créer des relations complexes et adaptatives entre les éléments sans jamais écrire une ligne de JavaScript.
Dans ce guide, nous explorerons les « super-pouvoirs » des sélecteurs CSS et comment ils changent notre façon de concevoir la cascade.
2. Un CSS plus propre avec :is() et :where()
Ces sélecteurs « logiques » vous permettent de regrouper plusieurs sélecteurs, ce qui rend votre code nettement plus propre et plus lisible.
La pseudo-classe :is()
Regroupe plusieurs sélecteurs et adopte la spécificité la plus élevée de l'un de ses arguments.
/* Avant */
header h1, header h2, header h3 { margin-bottom: 20px; }
/* Après */
header :is(h1, h2, h3) { margin-bottom: 20px; }
La pseudo-classe :where()
Similaire à :is(), mais elle a toujours une spécificité de 0. C'est parfait pour les styles de base (comme les couches de « reset » ou de « base ») que vous souhaitez pouvoir écraser facilement plus tard.
3. Ciblage précis avec le :nth-child() avancé
Le sélecteur :nth-child() a reçu une mise à jour majeure. Vous pouvez désormais utiliser la syntaxe "of S" pour sélectionner un élément en fonction de sa position au sein d'un sous-ensemble spécifique d'éléments.
/* Sélectionner le 2ème élément visible dans une liste filtrée */
li:nth-child(2 of .visible) {
background-color: yellow;
}
C'est incroyablement utile pour les listes dynamiques où certains éléments peuvent être masqués avec display: none.
4. Maîtriser la spécificité
L'un des plus grands points de friction en CSS est la « guerre de spécificité » — quand les styles ne s'appliquent pas parce qu'un autre sélecteur est « plus fort ».
La formule de spécificité :
- Styles en ligne : (ex:
style="...") - Priorité la plus élevée. - ID :
#mon-element(Score : 1, 0, 0). - Classes, attributs, pseudo-classes :
.ma-classe,[type="text"],:hover(Score : 0, 1, 0). - Éléments et pseudo-éléments :
div,h1,::before(Score : 0, 0, 1).
Conseil moderne : Utilisez @layer (couches de cascade) pour gérer la spécificité sur l'ensemble de votre projet.
5. Visualiser la spécificité
Si vous ne savez pas pourquoi un style ne s'applique pas, nous vous recommandons d'utiliser un calculateur de spécificité. Cet outil décompose vos sélecteurs et leur donne un score numérique, vous aidant à identifier instantanément le conflit.
Résumé des sélecteurs avancés
| Sélecteur | Idéal pour | Spécificité | Support |
|---|---|---|---|
| :has() | Style basé sur les enfants/l'état | Régulière | Large support |
| :is() | Groupement, code plus propre | Argument le plus haut | Large support |
| :where() | Styles de base à spécificité nulle | Toujours 0 | Large support |
| :nth-child | Style de listes dynamiques | Régulière | Large support |
Conclusion
Les sélecteurs CSS modernes vous offrent la « logique » d'un langage de programmation avec les performances du CSS natif. En maîtrisant :has() et en comprenant la spécificité, vous pouvez construire des relations d'interface utilisateur plus robustes et moins sujettes aux bugs.
Vous voulez tester vos sélecteurs ? Consultez notre Testeur de sélecteurs CSS et restez à l'écoute pour notre prochain Calculateur de spécificité CSS !