Calculateur de Spécificité CSS

La spécificité CSS est un poids attribué à un sélecteur CSS qui détermine quelle règle de style est appliquée lorsque plusieurs règles correspondent au même élément. Elle est représentée comme une valeur en trois parties (a, b, c) où a compte les sélecteurs d'ID, b les sélecteurs de classe/attribut/pseudo-classe, et c les sélecteurs de type d'élément et pseudo-éléments.

La spécificité est calculée en comptant trois catégories dans un sélecteur : (a) les sélecteurs d'ID comme #header, (b) les sélecteurs de classe (.card), d'attribut ([type="text"]) et les pseudo-classes (:hover, :nth-child), et (c) les sélecteurs de type (div, p) et les pseudo-éléments (::before). Le sélecteur universel (*) et les combinateurs (+, ~, >) n'ont pas de spécificité.

Le sélecteur avec la spécificité la plus élevée gagne. Comparez les valeurs (a, b, c) de gauche à droite : plus d'ID (a) l'emporte toujours sur plus de classes (b), et plus de classes l'emporte toujours sur plus d'éléments (c). Si la spécificité est égale, la règle qui apparaît en dernier dans la feuille de style gagne.

Le score numérique est une valeur comparable simplifiée (a * 10000 + b * 100 + c) pour classer les sélecteurs. Il ne doit pas être interprété comme une valeur CSS littérale — la spécificité CSS n'est pas un nombre unique mais une comparaison en trois parties.

Le !important ne fait pas partie de la spécificité — il remplace toutes les autres déclarations quelle que soit la spécificité. Cet outil calcule uniquement la spécificité du sélecteur, pas l'effet de !important. Évitez d'utiliser !important dans le CSS de production.

Non. Le sélecteur universel (*) a une spécificité nulle (0, 0, 0). Les combinateurs (+, >, ~, espace) ne contribuent pas non plus à la spécificité. Seuls les sélecteurs d'ID, de classe, d'attribut, de pseudo-classe, d'élément et de pseudo-élément augmentent la spécificité.

La pseudo-classe :not() elle-même n'a pas de spécificité, mais le sélecteur à l'intérieur en a. Par exemple, :not(#id) contribue (1, 0, 0) à la spécificité (un ID). Cet outil tient correctement compte de :not() en analysant l'argument entre parenthèses.

:: est la syntaxe moderne à double deux-points pour les pseudo-éléments (::before, ::after, ::placeholder). La syntaxe héritée à un seul deux-points (:before, :after) est toujours prise en charge par les navigateurs mais dépréciée. Les deux ajoutent 1 au compteur c (élément/pseudo-élément).

Les styles inline (ex. : style="color: red") ont une spécificité de (1, 0, 0, 0) — plus élevée que tout sélecteur — représentée comme une quatrième catégorie non couverte par cet outil. En pratique, les styles inline remplacent toujours les règles de la feuille de style (sauf si !important est utilisé).

Oui. Lorsque deux sélecteurs ont les mêmes valeurs (a, b, c), celui qui apparaît en dernier dans l'ordre source gagne. Cet outil les affiche avec le même rang quand ils ont des scores identiques, et vous pouvez consulter la décomposition (a, b, c) pour confirmer leur équivalence.

Une spécificité élevée rend les styles plus difficiles à remplacer et à maintenir. Pour remplacer un style, vous devez écrire un sélecteur encore plus spécifique ou utiliser !important. Garder la spécificité basse rend votre CSS plus modulaire et prévisible, surtout dans les grandes bases de code.

Cet outil prend en charge les sélecteurs CSS3 les plus courants, notamment les ID, les classes, les attributs, les pseudo-classes (dont :not()), les pseudo-éléments et les sélecteurs de type. Les sélecteurs modernes complexes comme :is(), :where(), :has() peuvent ne pas être entièrement analysés.