calcul de la spécificité¶
| 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.