Calculateur de spécificité CSS

La spécificité CSS est un système de poids qui détermine lequel des règles CSS s'applique lorsqu'au moins deux règles ciblent le même élément. Elle est calculée comme un score à trois parties (a,b,c) : a compte les sélecteurs ID, b compte les sélecteurs de classe, les sélecteurs d'attribut et les pseudo-classes, et c compte les sélecteurs d'éléments et les pseudo-éléments. Un score plus élevé dans une position plus à gauche gagne toujours, quel que soit le score dans les positions suivantes.

Selon les Sélecteurs CSS niveau 4, la spécificité des pseudo-classes :is(), :not() et :has() est égale à la spécificité du sélecteur le plus spécifique dans leur liste d'arguments. Par exemple, :is(.foo, #bar) a la spécificité de #bar (1,0,0) car c'est le sélecteur le plus spécifique dans l'argument. La pseudo-classe :where() est une exception — elle contribue toujours à zéro de spécificité.

Oui. Lorsque deux sélecteurs ont exactement le même score de spécificité, la règle de cascade CSS s'applique : la règle qui apparaît plus tard dans le code source gagne. C'est pourquoi comprendre la spécificité est important — compter uniquement sur l'ordre source peut mener à des feuilles de style fragiles qui se brisent lorsqu'on réorganise les règles.

L'algorithme de spécificité compare les scores position par position de gauche à droite. Un sélecteur ID a un score (1,0,0), tandis que n'importe quel nombre de sélecteurs de classe augmente uniquement la deuxième position. Puisque la position a est comparée avant la position b, même un seul sélecteur ID va toujours surmonter toute combinaison de sélecteurs de classe, d'attributs ou de pseudo-classes, quel que soit leur nombre.