calcul de la spécificité

Spécificité des sélecteurs

spécificité	Sélecteurs
100	id
10	classe, attributs, pseudo-classes (sauf not)
1	type, pseudo-éléments
0	sélecteur universel *

On calcul la spécificité d’un sélecteur en additionnant la spécificité de tous les éléments qui le compose.

exemple

<ul>
  <li>item 1</li>
  <li class="special">item 2</li>
  <li id="exemple" class="special">item 3</li>
</ul>

/* spécificité égale à 1 */
li { color: grey; }

/* spécificité égale à 10 */
.special { color: blue; }

/* spécificité égale à 100 */
#exemple { color: red; }

/* spécificité égale à 10 + 1 = 11 */
li .special { color: orange; }

Voir aussi

Vous pouvez aussi utiliser cet outil en ligne.

Vous pouvez aussi lire la section correspondante dans la spécification CSS Selectors level 3. Pour la spécificité dans les éléments styles, voir CSS Selectors level 2.

Avertissement

Les spécificités sont plus complexes qu’ils n’y parait, ainsi, notez que par exemples, 1000 classes ne suffisent pas à reprendre la priorité sur un seul id.