Calculateur de spécificité CSS (a,b,c) en ligne
Calculez la spécificité d’un sélecteur CSS (a,b,c) pour comprendre quelle règle l’emporte, dans le navigateur.
Spécificité : (1,2,3). Plus le tuple est grand (comparé de gauche à droite), plus la règle l’emporte. Un style inline vaut (1,0,0,0) et !important passe au-dessus.
🔒 100 % côté client — aucune donnée envoyée
Calculez la spécificité de n'importe quel sélecteur CSS et obtenez le triplet (a,b,c) instantanément. Idéal pour comprendre pourquoi une règle en écrase une autre et déboguer vos conflits de styles. 100 % dans votre navigateur, aucune donnée envoyée sur un serveur.
À quoi ça sert ?
- ▸ Comprendre pourquoi un style CSS n'est pas appliqué malgré votre règle
- ▸ Comparer deux sélecteurs pour savoir lequel l'emporte
- ▸ Éviter le recours abusif à !important en ajustant vos sélecteurs
- ▸ Enseigner ou réviser les règles de spécificité CSS
FAQ
Comment calculer la spécificité d'un sélecteur CSS ?
On compte trois catégories : (a) les identifiants #id, (b) les classes, attributs et pseudo-classes, (c) les éléments et pseudo-éléments. Collez votre sélecteur dans l'outil et le triplet (a,b,c) s'affiche automatiquement.
Quel sélecteur a la priorité la plus haute en CSS ?
Un style inline l'emporte sur un ID, qui l'emporte sur une classe, qui l'emporte sur un élément. À spécificité égale, c'est la dernière règle déclarée qui gagne, sauf en cas de !important.
Est-ce que !important compte dans la spécificité ?
Non, !important n'entre pas dans le calcul (a,b,c) : il surpasse la cascade normale à un niveau supérieur. Deux règles !important sont ensuite départagées selon leur spécificité respective.