Calculez la spécificité des sélecteurs CSS instantanément. Comprenez le poids, les scores de priorité et résolvez les conflits de styles. Entrez n'importe quel sélecteur CSS pour voir sa valeur de spécificité au format (a,b,c). Gratuit et côté client.
Le Calculateur de Spécificité CSS aide les développeurs à comprendre et comparer le poids des sélecteurs CSS. La spécificité CSS détermine quels styles s'appliquent lorsque plusieurs règles ciblent le même élément. Le calculateur décompose tout sélecteur en ses composantes — styles en ligne, IDs, classes/attributs/pseudo-classes et éléments/pseudo-éléments — et calcule la valeur de spécificité (a,b,c). Comprendre la spécificité est essentiel pour déboguer les conflits CSS et écrire des feuilles de style maintenables.
La spécificité CSS est l'algorithme que les navigateurs utilisent pour décider quelles valeurs de propriétés CSS s'appliquent à un élément lorsque plusieurs règles pourraient s'appliquer. Elle est calculée comme un tuple de trois valeurs (a, b, c) : a = nombre de sélecteurs ID, b = nombre de sélecteurs de classe + sélecteurs d'attribut + pseudo-classes, c = nombre de sélecteurs d'élément + pseudo-éléments.
La spécificité est calculée en comptant le nombre de chaque type de sélecteur dans la chaîne : (a) sélecteurs ID (#id), (b) sélecteurs de classe (.class), sélecteurs d'attribut ([attr]) et pseudo-classes (:hover), et (c) sélecteurs d'élément (div) et pseudo-éléments (::before). La déclaration !important remplace entièrement la spécificité.
Un sélecteur ID (#id) dépasse toujours tout nombre de sélecteurs de classe car la spécificité n'est pas un nombre en base 10 — c'est un tuple. (1, 0, 0) est toujours supérieur à (0, 100, 0). Aucune quantité de classes ne peut battre un seul ID.
Non, le sélecteur universel (*) a une spécificité de zéro et ne contribue pas au calcul de spécificité.