:not() :is() et :where()
Excluez des éléments avec :not(), faites correspondre n’importe quel élément d’une liste avec :is() et utilisez :where() pour une faible spécificité.
:not() :is() et :where() est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Pseudo-classe :not()
:not(selector) sélectionne les éléments qui ne correspondent pas au sélecteur indiqué. Elle inverse la sélection.
<input type="text" placeholder="Text input (styled)" />
<input type="submit" value="Submit (unstyled)" />
:not() avec plusieurs arguments
Les CSS modernes autorisent plusieurs arguments dans :not() : la pseudo-classe correspond aux éléments qui ne correspondent à aucun des sélecteurs indiqués :
<a href="#">Normal link</a> <a href="#" class="active">Active link</a> <a href="#" class="disabled">Disabled link</a>
Spécificité de :not()
La spécificité de :not() est celle de son argument le plus spécifique. :not(.active) possède une spécificité de niveau classe (0,1,0).
Pseudo-classe :is()
:is() correspond à tout élément qui correspond à l’un des sélecteurs d’une liste. Elle simplifie le regroupement et réduit les répétitions.
<header><h1>Site Title</h1><h2>Subtitle</h2><h3>Tagline</h3></header>
Spécificité de :is()
:is() adopte la spécificité de son argument le plus spécifique. Si la liste contient un sélecteur d’ID, toute la règle possède une spécificité d’ID.
<div id="header"><h2>Header H2 (crimson via ID)</h2></div>
<div class="card"><h2>Card H2 (crimson via class)</h2></div>
Analyse tolérante de :is()
:is() utilise une analyse tolérante des sélecteurs : si un sélecteur de la liste n’est pas valide, il est ignoré silencieusement et les autres continuent de s’appliquer. Les sélecteurs ordinaires séparés par des virgules échouent entièrement si l’un d’eux n’est pas valide.
Pseudo-classe :where()
:where() fonctionne exactement comme :is(), mais possède une spécificité nulle. Elle est conçue pour les classes utilitaires et les styles de réinitialisation qui doivent être faciles à remplacer.
<h1>No top margin</h1><h2>No top margin</h2><h3>No top margin</h3>
:where() pour les réinitialisations
:where() est idéale pour les réinitialisations CSS et les styles de base qui ne doivent jamais remporter les conflits de spécificité :
<ul><li>Item A</li><li>Item B</li></ul>
<ol><li>Step 1</li><li>Step 2</li></ol>
Comparaison de la spécificité
Résumé du comportement de la spécificité :
:is()— spécificité la plus élevée parmi les arguments:where()— toujours une spécificité nulle:not()— spécificité la plus élevée parmi les arguments
Enchaîner :is() et :not()
Combinez-les pour créer des sélecteurs précis et lisibles :
<nav class="nav"><a href="#">Link</a> <button>Button</button> <a href="#" class="disabled">Disabled Link</a></nav>
Prise en charge par les navigateurs
:is() et :where() sont prises en charge par tous les navigateurs modernes. :not() avec plusieurs arguments est prise en charge par les navigateurs modernes. Évitez-les dans les projets nécessitant la prise en charge d’IE11.
Vérification rapide
Quelle pseudo-classe possède une spécificité nulle quels que soient ses arguments ?
Récapitulatif
:not() inverse la sélection et accepte plusieurs arguments. :is() correspond à n’importe quel sélecteur d’une liste et adopte la spécificité la plus élevée de cette liste. :where() fait de même, mais avec une spécificité nulle : elle est idéale pour les réinitialisations. Toutes trois utilisent une analyse tolérante et ignorent silencieusement les sélecteurs non valides.
Questions Fréquemment Posées
La leçon « :not() :is() et :where() » est-elle gratuite ?
Oui — le texte complet de « :not() :is() et :where() » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « :not() :is() et :where() » ?
Excluez des éléments avec :not(), faites correspondre n’importe quel élément d’une liste avec :is() et utilisez :where() pour une faible spécificité. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « :not() :is() et :where() » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- :hover :focus :active et :visited
- :nth-child et :nth-of-type
- :not() :is() et :where()
- :checked :disabled et pseudo-classes d’état des formulaires