La pseudo-classe :is en CSS pour regrouper les sélecteurs

Vous écrivez du CSS depuis quelque temps… et plus vos projets grandissent, plus vos sélecteurs deviennent longs, répétitifs, parfois illisibles. La pseudo-classe :is en CSS est justement là pour vous simplifier la vie

• Fonctionne la pseudo-classe :is en CSS pour simplifier vos sélecteurs et écrire un code plus propre et plus lisible.
• Maîtriser la spécificité liée à :is en css afin d’éviter les conflits et garder le contrôle sur la cascade de vos styles.
• Structurer votre CSS de manière plus logique et professionnelle, en réduisant les répétitions et en facilitant la maintenance de vos projets.

Dans ce tutoriel complet, nous allons explorer en profondeur la pseudo-classe :is, comprendre son fonctionnement, ses avantages, ses pièges, et surtout l’utiliser dans des cas concrets pour que vous puissiez l’appliquer dans vos projets front-end.

À quoi sert la pseudo-classe :is en CSS ?

La pseudo-classe :is est une fonctionnalité du CSS moderne qui permet de regrouper plusieurs sélecteurs à l’intérieur d’un seul.

En d’autres termes, au lieu d’écrire plusieurs règles séparées, vous pouvez les combiner dans une seule déclaration grâce à :is().

Prenons un example simple sans :is. Imaginons que vous vouliez appliquer la même couleur à tous les titres h1, h2 et h3.

h1 {
    color: #2c3e50;
}

h2 {
    color: #2c3e50;
}

h3 {
    color: #2c3e50;
}

Cela fonctionne, bien sûr. Mais c’est répétitif.

Vous pourriez déjà simplifier avec :

h1, h2, h3 {
    color: #2c3e50;
}

Alors… à quoi sert :is dans ce cas ?

Bonne question…

• La vraie puissance de la pseudo-classe :is apparaît lorsque vos sélecteurs deviennent plus complexes. Nous allons découvrir tout cela.

La syntaxe de :is css

La syntaxe est très simple :

:is(sélecteur1, sélecteur2, sélecteur3) {
    propriété: valeur;
}

Vous placez à l’intérieur des parenthèses tous les sélecteurs que vous souhaitez cibler.

Maintenant, voyons un exemple plus intéressant. On va simplifier des sélecteurs imbriqués. Pour commencer, imaginons cette structure HTML :

<section class="article">
    <h2>Titre</h2>
    <p>Contenu du paragraphe</p>
</section>

<section class="news">
    <h2>Actualité</h2>
    <p>Contenu de l’actualité</p>
</section>

Vous voulez que les h2 et les p dans .article et .news aient la même marge.

Sans la pseudo-classe :is, vous pourriez écrire :

.article h2,
.article p,
.news h2,
.news p {
    margin-bottom: 20px;
}

Ça commence à devenir un peu lourd.

Avec la pseudo-classe :is en CSS :

:is(.article, .news) :is(h2, p) {
    margin-bottom: 20px;
}

Et là… ça devient tout de suite plus lisible.

Vous regroupez :

• les sections ciblées
• les éléments internes ciblés

• Votre code devient plus logique.

Comment fonctionne réellement la pseudo-classe :is ?

Maintenant, allons plus loin. Comprendre la mécanique interne est essentiel.

Quand vous utilisez :is(), le navigateur va tester si l’élément correspond à au moins un des sélecteurs listés. Si c’est le cas, la règle s’applique.

Autrement dit, :is() fonctionne comme un « OU logique » (très utilisé dans les conditions en PHP ou JS)

:is(button, a, input) {
    font-family: Arial, sans-serif;
}

Ici, si l’élément est un button OU un a OU un input, alors le style s’applique.

• Simple, mais puissant.

La spécificité de la pseudo-classe :is

Et là, attention. On entre dans un point très important.

La spécificité en CSS détermine quelle règle gagne quand plusieurs règles ciblent le même élément.

👉 Tout comprendre à la Spécificité et aux sélecteurs.

Avec :is CSS, la spécificité est calculée selon le sélecteur le plus spécifique contenu dans les parenthèses.

Prenons cet exemple :

:is(p, .texte, #important) {
    color: red;
}

• p → faible spécificité
• .texte → moyenne spécificité
• #important → forte spécificité

• La pseudo-classe :is prendra la spécificité la plus élevée, donc celle de #important.

Ce point est crucial à comprendre.

Sinon, vous risquez de vous demander : « Mais pourquoi ma règle prend le dessus alors qu’elle ne devrait pas ? ». La pseudo-classe :is peut donc influencer la cascade CSS de manière significative.

Comparaison avec :where()

Vous avez peut-être entendu parler de :where().

La différence est subtile mais fondamentale :

• :is() prend la spécificité la plus forte des sélecteurs internes.
• :where() a toujours une spécificité de zéro.

Exemple :

:where(h1, h2, h3) {
    color: blue;
}

Avec :where, la spécificité est nulle. Donc si une autre règle plus spécifique existe, elle prendra le dessus.

Si vous débutez, retenez simplement ceci :

• Utilisez :is quand vous voulez regrouper intelligemment.
• Utilisez :where quand vous voulez éviter les conflits de spécificité.

👉 Aller plus loin et tout savoir sur la pseudo-classe :where en CSS.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Cas pratique : styliser des boutons partout sur le site

Imaginons que vous ayez :

<button>Envoyer</button>
<a class="btn">Lien bouton</a>
<input type="submit" value="Valider">

Vous voulez leur appliquer le même style.

Avec :is en CSS :

:is(button, .btn, input[type="submit"]) {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
}

• Résultat : Un style uniforme, propre, facile à maintenir.

Et si demain vous ajoutez un nouveau type de bouton ? Il suffira de l’ajouter dans :is().

Utilisation avancée avec :is et d’autres pseudo-classes

La pseudo-classe :is peut aussi contenir d’autres pseudo-classes.

Par exemple :

:is(a:hover, button:hover) {
    opacity: 0.8;
}

Ou encore :

nav :is(a:focus, a:hover) {
    text-decoration: underline;
}

Cela permet de centraliser les comportements interactifs. Votre CSS devient donc plus cohérent et plus structuré.

:is dans des sélecteurs complexes

Prenons un exemple plus réaliste de site.

<header>
    <h1>Titre principal</h1>
</header>

<main>
    <h1>Titre secondaire</h1>
</main>

Vous voulez styliser les h1 présents dans header et main.

:is(header, main) h1 {
    font-size: 2rem;
}

Vous évitez ainsi :

header h1,
main h1 {
    font-size: 2rem;
}

Ce n’est pas seulement plus court. C’est surtout plus lisible.

Les avantages de la pseudo-classe :is

• D’abord, la lisibilité.
• Ensuite, la réduction de duplication.
• Mais surtout, la maintenance facilitée.

Imaginez un gros projet comme un site de formation ou un blog. Quand vous devez modifier un style global, vous serez heureux d’avoir centralisé vos sélecteurs.

• Moins de répétitions signifie moins d’erreurs.

Et franchement, quand votre fichier CSS commence à faire 2000 lignes… vous vous remercierez.

Les pièges à éviter avec :is css

Attention tout de même.

Premier piège : la spécificité inattendue. Si vous mélangez un sélecteur ID avec des classes dans :is(), vous augmentez fortement la spécificité.

Deuxième piège : l’abus. Ce n’est pas parce que :is() existe qu’il faut l’utiliser partout. Un sélecteur simple reste plus lisible qu’un sélecteur inutilement complexe.

Troisième point : la compatibilité. La pseudo-classe :is est aujourd’hui largement supportée par les navigateurs modernes. Mais si vous travaillez sur un projet très ancien ou avec des contraintes spécifiques, vérifiez toujours la compatibilité.

Exemple pédagogique complet

Prenons un mini projet.

Sa structure HTML :

<div class="card">
    <h2>Titre</h2>
    <p>Description</p>
    <a href="#">Lire plus</a>
</div>

Objectif :

• Même style pour h2 et p
• Même style pour a et button

Le CSS sera donc naturellement :

.card :is(h2, p) {
    font-family: Arial, sans-serif;
    margin-bottom: 15px;
}

.card :is(a, button) {
    display: inline-block;
    background-color: #2ecc71;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
}

Vous structurez votre logique par groupe d’éléments.

• C’est plus propre.
• Plus évolutif.
• Plus moderne.

Pourquoi :is en CSS change votre manière d’écrire des styles CSS

Quand on débute en CSS, on pense souvent en « élément par élément ».

Avec la pseudo-classe :is, vous commencez à penser en « groupes logiques ». Vous structurez votre code autour de comportements communs.

• C’est une évolution naturelle vers un CSS plus maintenable.

Et c’est exactement ce qui fait la différence entre un code bricolé et un code professionnel.

Astuce : combiner :is avec des media queries

Vous pouvez utiliser :is() dans n’importe quel contexte.

@media (max-width: 768px) {
    :is(h1, h2, h3) {
        font-size: 1.5rem;
    }
}

Pratique pour centraliser les adaptations responsives.

👉 Tout savoir sur Les media queries en CSS

Un mot sur la performance

La pseudo-classe :is n’a pas d’impact négatif notable sur la performance. Les moteurs modernes sont optimisés pour gérer ce type de sélecteur.

• Vous pouvez donc l’utiliser sereinement.

---

La pseudo-classe :is en CSS n’est pas juste un raccourci syntaxique. C’est une nouvelle façon de structurer votre logique de style. Elle vous permet de regrouper intelligemment des sélecteurs, de réduire les répétitions et de rendre votre code plus clair.

En apprenant à maîtriser :is CSS, vous franchissez une étape importante : vous passez d’un CSS fonctionnel à un CSS réfléchi, organisé, et évolutif. Et c’est exactement ce genre de détail qui transforme un développeur débutant en développeur confiant.

Prenez le temps de l’expérimenter dans vos projets. Testez-la, observez la cascade, jouez avec la spécificité. Vous verrez : une fois adoptée, la pseudo-classe :is devient vite indispensable.