Calcul de la spécificité : style intégré, ID, classe, élément
Calculez les scores de spécificité et prévoyez quelle règle l’emportera dans n’importe quel conflit de styles.
Calcul de la spécificité : style intégré, ID, classe, élément est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.
Qu’est-ce que la spécificité ?
La spécificité détermine quelle règle CSS l’emporte lorsque plusieurs règles ciblent le même élément et la même propriété. Elle est calculée sous la forme d’un score en quatre parties : (A, B, C, D), où A est la plus élevée et D la plus faible.
Composants de la spécificité
Les quatre colonnes :
- A : styles en ligne (attribut style="") = 1,0,0,0
- B : sélecteurs d’ID (#id) = 0,1,0,0
- C : sélecteurs de classe (.class), sélecteurs d’attribut et pseudo-classes = 0,0,1,0
- D : sélecteurs de type (élément) et pseudo-éléments = 0,0,0,1
Exemples de spécificité
Calcul de la spécificité :
<p>Plain paragraph — matches <code>p</code></p>
<p class="card">Card paragraph — matches <code>.card</code></p>
<div id="header">
Header block — matches <code>#header</code>
<span class="logo">Logo — matches <code>#header .logo</code></span>
</div>
<p class="intro">Intro paragraph — matches <code>p.intro</code></p>
<nav class="nav">
<a href="#" class="nav-link active">Active link — matches <code>.nav .nav-link.active</code></a>
</nav>Le sélecteur universel n’a aucune spécificité
Le sélecteur universel *, les combinateurs (+, >, ~, espace) et la pseudo-classe :where() contribuent tous à zéro (0,0,0,0) pour la spécificité.
Les styles en ligne l’emportent
Les styles en ligne (attribut style="") ont la spécificité la plus élevée (1,0,0,0). Seul !important peut les surcharger depuis une règle de feuille de style.
Comparer les scores de spécificité
Comparez de gauche à droite. La première colonne où les scores diffèrent détermine le gagnant. (0,1,0,0) l’emporte sur (0,0,99,99), car la colonne des ID l’emporte immédiatement.
Spécificité de :is(), :not() et :has()
:is(), :not() et :has() prennent la spécificité de leur argument le plus spécifique :
<div id="header">:is(#header, .nav) match via ID</div>
<nav class="nav">:is(#header, .nav) match via class</nav>
<button class="active">Active button (excluded from :not(.active))</button>
<button>Plain button (matches :not(.active))</button>
<p class="p">:where(.p) paragraph</p>Spécificité de nth-child
:nth-child(), :first-child, :hover et les autres pseudo-classes ajoutent toutes (0,0,1,0) — une spécificité de niveau classe.
Spécificité des pseudo-éléments
::before, ::after, ::first-line, etc. ajoutent (0,0,0,1) — une spécificité de niveau élément. Ils se trouvent dans la colonne D.
La spécificité n’est pas l’héritage
La spécificité est calculée pour chaque propriété et chaque élément. Une règle dont la spécificité est plus élevée l’emporte pour une propriété donnée, mais les valeurs héritées d’un parent dont la spécificité est élevée ne l’emportent pas sur des règles directes plus spécifiques appliquées à l’enfant.
Outils de calcul de la spécificité
Utilisez des outils en ligne comme specificity.keegan.st ou les DevTools du navigateur pour vérifier la spécificité. Dans les DevTools, les styles barrés dans le panneau des styles indiquent qu’une règle plus spécifique l’a emporté.
Vérification rapide
Quel sélecteur a la spécificité la plus élevée : #sidebar .link ou .nav .nav-item .nav-link.active ?
Récapitulatif
Les scores de spécificité sont (A, B, C, D) : styles en ligne, ID, classes/attributs/pseudo-classes, éléments/pseudo-éléments. Comparez de gauche à droite : la première colonne différente l’emporte. :where() contribue toujours à zéro. Un seul ID l’emporte sur n’importe quel nombre de sélecteurs de classe. Utilisez le panneau des styles des DevTools pour voir quelles règles l’emportent et pourquoi.
Questions Fréquemment Posées
La leçon « Calcul de la spécificité : style intégré, ID, classe, élément » est-elle gratuite ?
Oui — le texte complet de « Calcul de la spécificité : style intégré, ID, classe, élément » 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 « Calcul de la spécificité : style intégré, ID, classe, élément » ?
Calculez les scores de spécificité et prévoyez quelle règle l’emportera dans n’importe quel conflit de styles. 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 1 sur 4.
Combien de temps prend la leçon « Calcul de la spécificité : style intégré, ID, classe, élément » ?
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
- Calcul de la spécificité : style intégré, ID, classe, élément
- La cascade : origine et ordre
- !important : quand l’utiliser et pourquoi l’éviter
- Héritage et propriété all