Qu'est-ce que la spécificité CSS et pourquoi est-ce important ?
Lorsque deux règles CSS ciblent le même élément et la même propriété (par exemple `color`), le navigateur doit décider laquelle appliquer. C'est la cascade. Les facteurs décisifs : origine (auteur vs utilisateur), !important, spécificité du sélecteur et ordre dans la source.
La spécificité est le poids numérique d'un sélecteur. On la note en quatre cases (a, b, c, d) : a = style inline, b = nombre d'ID, c = nombre de classes / attributs / pseudo-classes, d = nombre d'éléments / pseudo-éléments. Le sélecteur `#header .card a` obtient (0, 1, 1, 1). Le sélecteur `.menu .item.active` obtient (0, 0, 3, 0). Le premier l'emporte grâce à l'ID.
Collez un sélecteur et voyez le nombre concret plus une décomposition de ce qui contribue à quoi. Le mode comparaison montre quel sélecteur l'emporte pour la même propriété. Le mode bloc CSS parse une règle complète et fait remonter les conflits.
Mode d'emploi
- Choisissez un mode : Sélecteur unique (déboguer un sélecteur précis), Comparer (plusieurs sélecteurs côte à côte), Bloc CSS (une règle complète).
- Collez le sélecteur ou le code CSS dans le champ.
- L'outil affiche la spécificité sous forme (a,b,c,d) plus une décomposition : qui rapporte quoi.
- Le mode comparaison met en évidence le gagnant : le sélecteur à la spécificité la plus haute remporte le conflit.
- Cliquez sur « Copier » pour copier le résultat (pour une revue de code ou une doc).
Quand ça aide
Situations réelles où la spécificité compte :
- Déboguer « pourquoi mon style ne s'applique pas ». Votre règle `.button { color: red }` ne tient pas : il y a de fortes chances qu'une autre règle ait une spécificité plus haute. Collez les deux, voyez laquelle gagne.
- Refactorisation CSS. Passer de CSS legacy à BEM / utility-first : il faut comprendre les poids actuels des sélecteurs.
- Migration vers Tailwind. Tailwind utilise majoritairement des classes (spécificité 0,0,1,0) : si votre règle legacy est `#sidebar .menu a:hover` (0,1,2,1), alors Tailwind perd. Vous devez soit recourir à `!important`, soit augmenter la spécificité de la classe Tailwind.
- Revue de code. Un commentaire du type « ce sélecteur a une spécificité trop élevée, difficile à surcharger » : l'outil donne des chiffres concrets pour étayer la discussion.
- Apprendre Selectors L4 : `:where()` est toujours de spécificité zéro, `:is()` prend la plus élevée de ses arguments, idem pour `:has()`. La pratique aide à retenir.
- CSS-in-JS / Styled Components. Les classes générées sont de faible spécificité (`.css-abc123`) : facilement surchargées par un `#id` ou `!important`. Bon à savoir.
- Feuilles de style print. Les règles dans `@media print` peuvent avoir la même spécificité que les normales : l'ordre dans la source décide.
Pour construire un dégradé CSS, voir le générateur de dégradés. Pour la box-shadow, voir le générateur box-shadow.