Calculateur de specificite CSS

a,b,c,d - selecteurs CSS - cascade

Saisissez un ou plusieurs sélecteurs CSS et obtenez le score de spécificité (a,b,c,d) avec une décomposition par composant. Comparez deux sélecteurs pour identifier la règle prioritaire.

Selecteurs a calculer
Analyse de specificite
A - Styles inline
style="..." directement dans le HTML. Valeur: 1,0,0,0
B - ID
#id - Un ID par element. Valeur: 0,1,0,0
C - Classes / Attr / Pseudo
.class [attr] :hover :focus. Valeur: 0,0,1,0
D - Elements / Pseudo-el.
div p h1 ::before ::after. Valeur: 0,0,0,1
Comparaison des selecteurs
Exemples

La spécificité CSS est l'un des concepts les plus mal compris du développement front-end : savoir pourquoi un style écrase un autre — et pourquoi !important ne devrait pas être la solution par défaut — fait la différence entre une feuille de style maintenable et un code truffé de surcharges accumulées.

Ce calculateur de spécificité CSS vous permet de :

  • Analyser des sélecteurs simples et complexes (classes, IDs, pseudo-classes, pseudo-éléments)
  • Visualiser le score au format (a, b, c, d) avec décomposition par type de sélecteur
  • Comparer deux sélecteurs pour déterminer lequel est prioritaire
  • Identifier les sélecteurs à haute spécificité pouvant causer des problèmes de scalabilité

Indispensable pour les thèmes WordPress avec des styles provenant de plugins, thèmes parent/enfant ou blocs Gutenberg.

Comment lire la specificite CSS

  • A represente les styles inline.
  • B compte les selecteurs ID.
  • C compte les classes, attributs et pseudo-classes.
  • D compte les elements et pseudo-elements.

La comparaison est lexicographique de gauche a droite : A, puis B, puis C, puis D.