Tout sur les nouveaux sélecteurs :is() et :where() en CSS

Découvrons ensemble les derniers sélecteurs proposés par CSS : :where() et :is() ! Ces sélecteurs vont nous permettre de réduire notre code et de sélectionner nos éléments de manière plus flexible. Comment ça fonctionne ? C'est tout ce que nous allons voir dans cet article.

Le problème avec nos sélecteurs

Lorsque nous codons dans les feuilles de style de nos projets, vous êtes sûrement déjà arrivés à ce genre de résultat :

.main h1,
.main h2,
.main .leading {
    color: pink;
}

.nav li,
.nav p {
    padding: 15px;
}

Ce genre de sélecteurs n'est pas impressionnant, il nous permet de préciser grâce à la virgule plusieurs éléments à sélectionner et sur lesquels nous souhaitons ajouter du style, rien de plus, rien de moins.

Nous utilisons généralement ce genre de code lorsque nous souhaitons factoriser notre code afin de ne pas devoir préciser la couleur pour chaque titre h1, h2 et chaque classe leading à la main, un par un. Le problème reste que nous disposons d'un code très long, sur plusieurs lignes.

Grâce à l'introduction des sélecteurs :is() et :where(), ce genre de sélecteurs passera désormais aux sourvenirs !

Le sélecteur :is()

Pensez à chaque moment où vous souhaitez appliquer le même style à plusieurs éléments. Avec :is() nous pouvons maintenant sélectionner tous ces éléments de façon plus courte, rapide et intuitive.

.main :is(h1, h2, .leading) {
    color: pink;
}

.nav :is(li, p) {
    padding: 15px;
}

Plutôt simple à utiliser ne pensez-vous pas ?

Le sélecteur :is() nous propose de sélectionner plusieurs éléments à cibler sans devoir préciser à chaque fois les éléments parents.

Le sélecteur :where()

Le sélecteur :where() pourrait vous... décontenancer. Et pour cause : il fonctionne exactement comme le sélecteur :is() et proposer plus ou moins la même fonction, mais à un détail prêt.

.main :where(h1, h2, .leading) {
    color: pink;
}

.nav :where(li, p) {
    padding: 15px;
}

Mais attendez ça fonctionne vraiment pareil qu'avec :is() ?

Eh bien oui, rien ne change à part le fait que nous utilisions where plutôt que le mot is. En tout cas, au niveau du code. Car en coulisse... c'est un autre débat !

Le sélecteur :where() nous propose de sélectionner plusieurs éléments à cibler sans devoir préciser à chaque fois les éléments parents et sans donner de la priorité aux propriétés proposées. En d'autres termes un peu plus profonds sans ajouter une spécificité à l'élément ciblé.

C'est quoi une spécificité ?

Excellente question !

La spécificité c'est une valeur, qui permet de dire au navigateur quelle propriété utiliser en priorité.

Voici un petit exemple :

<div id="text-purple" style="color: pink">Hello Believemy</div>

.text-red {
    color: red;
}

De quelle couleur pensez-vous que le texte sera ? Violet ou rose ? Rose bien évidemment.

Mais donc comment se fait-il que votre navigateur ait choisi la couleur rose plutôt que la couleur rouge ? La réponse est simple : grâce à la spécificité.

En ayant précisé l'attribut style nous avons averti notre navigateur qu'il s'agissait d'une propriété à passer devant toutes les autres qui pourraient - ou ne pourraient pas - exister.

Chaque sélecteur CSS à sa propre spécificité. Ainsi si deux propriétés sont ajoutées au même élément grâce à deux sélecteurs différents, celui qui aura la spécificité la plus grande l'emportera toujours.

Voici la hiérarchie entre chaque type de sélecteur :

1. Les styles en inline avec l'attribut style (1000 points de spécificité) ;
2. Un ID (#id) (100 points) ;
3. Une classe (.classe), un attribut (input[attribut]) ou aussi une pseudo-classe (input:hover) (10 points de spécificité) ;
4. Un élément (input), pseudo-élément (input::before) (1 point de spécificité).

Ces points de spécificité peuvent s'additionner les uns aux autres.

Ainsi nous aurons :

• 2 points de spécificité pour ul li { ... }
• 14 points de spécificité pour div ul ol li.text-red { ... } (quatre élément + une classe : 4 + 10)

Sans oublier le !important qui vaut 10 000 points de spécificté (et qui permet de "forcer" l'utilisation d'une certaine propriété, d'où l'intérêt du mot "important".

Si nous reprenons l'exemple ci-dessus, pour avoir un texte en rouge plutôt qu'en rose nous allons devoir préciser !important :

.text-red {
    color: red!important;
}

Conclusion

Les deux nouveaux sélecteurs :is() et :where() sont très intéressants puisqu'ils permettent de mieux cibler les éléments et d'avoir un code plus facile à comprendre et à lire.

La seule est unique différence entre ces deux sélecteurs, vient du fait que le sélecteur :where() n'ajoute aucune spécificité et donc aucun point de spécificité aux éléments ciblés, alors que :is() utilise la spécificité du sélecteur le plus spécifique (si vous ciblez des classes, il renverra une spécificité de 10 alors que si vous ciblez des classes et des id, il aura une spécificité de 100).

Dorénavant, vous pouvez dire que vous savez tout sur :is() et :where(). Si vous souhaitez en savoir plus sur le HTML et le CSS, nous avons une formation complète dédiée à ces deux langages de programmation. N'hésitez pas non plus à partager cet article à votre entourage sur vos réseaux-sociaux. Merci !