Calculateur de spécificité CSS

Calculer les scores de spécificité des sélecteurs CSS avec décomposition a-b-c

Qu'est-ce que c'est et comment ça marche ?

La spécificité CSS est l'algorithme utilisé par les navigateurs pour décider quelle règle CSS gagne quand plusieurs règles ciblent le même élément. Elle est calculée comme un score en trois parties (A, B, C) : A = styles inline, B = IDs, C = classes, attributs, pseudo-classes et éléments.

Cette calculatrice prend un sélecteur CSS et calcule son score de spécificité avec la décomposition (A, B, C).

Cas d'usage

• Debug des surcharges : deux règles ciblent .card h2 — l'une ajoute une couleur mais ça ne fonctionne pas. Comparer les sélecteurs pour trouver la spécificité la plus haute.
• Éviter les refactorisations : avant d'ajouter une nouvelle classe utilitaire, vérifier qu'elle n'est pas déjà surchargée par un sélecteur de composant à spécificité plus élevée.
• Préparation d'entretien : calculer la spécificité de div.container > ul li.active::before.

Questions fréquentes

Comment la spécificité est-elle calculée exactement ?

Compter : (styles inline = A), (IDs = B), (classes, attributs, pseudo-classes = C), (éléments, pseudo-éléments = C poids plus faible). Un seul ID bat toujours n'importe quel nombre de classes.

Que fait !important à la spécificité ?

!important écrase toutes les règles de spécificité et d'ordre de source. En abuser brise la cascade.

La spécificité s'applique-t-elle aux propriétés héritées ?

Non. Les valeurs héritées n'ont pas de spécificité — toute valeur explicitement définie sur l'élément gagne.

Quelle est la spécificité de :where() vs :is() ?

:where() a une spécificité nulle. :is() prend la spécificité de son argument le plus spécifique.

Développeur

Générateur UUID · Convertisseur de timestamp · Encodeur Base64 · Décodeur Base64 · Générateur de hash · Convertisseur de couleurs