Qu’est-ce que la spécificité CSS ?

Quand on apprend le CSS, il me semble qu’il y a un aspect oublié : la spécificité. Elle est super importante car c’est elle qui décide quel propriété prendra le pas sur une autre. Je m’explique :

Par défaut CSS se lit de bas en haut, et on va dire que pour deux déclarations égales, la deuxième prend le pas sur l’autre, ok ?

<div>
    <p>Mon texte</p>
</div>

<style>
p {
    color: blue;
}

p {
    color: red;
}
</style>

/* Ici c'est la couleur rouge qui sera appliquée */

Dans l’exemple ci-dessus, c’est la couleur rouge qui sera appliquée au paragraphe car appelée en dernière. CSS va regarder qui est déclaré en dernier, parce que les deux déclarations ont la même spécificité.
Les deux paragraphes sont stylisés avec la balise <p>

Maintenant imaginons le code suivant :

<div>
    <p>Mon texte</p>
</div>

<style>
div p {
    color: blue;
}

p {
    color: red;
}
</style>
/* Ici c'est la couleur bleue qui sera appliquée */

Ici, la couleur bleue est appliquée. Pourtant dans le code CSS, la couleur rouge est déclarée après la couleur bleue.

Ce qu’il se passe c’est que quand CSS va regarder comment styliser la balise <p>, il va regarder quelle est la spécificité la plus forte appliquée.
Dans notre exemple, il va voir qu’il y a deux déclarations : la première avec une div et un p. Et la deuxième seulement avec un p.

La spécificité en CSS est une règle qui met plus d’importance sur le nombre de sélécteurs, et leur valeur.

Les sélécteurs ont une valeur qui leur sont appliqués. Les voici du plus fort au moins fort :

1. Les IDs ont la valeur la plus forte (c’est pourquoi il est déconseillé de les utiliser en CSS)
2. Les classes
3. Les élements et les pseudo-élements (:before, :after, etc…)

Pour donner un exemple :

Mon texte

<p id="container" class="text">Mon texte</p>

<style>
#container {
    color: blue;
}

.text {
    color: red;
}

p {
    color: green;
}
</style>
/* Ici c'est la couleur bleue qui sera appliquée, car l'ID est le plus fort des sélécteurs */

Pour le même nombre de sélécteur, c’est l’ID le plus important, suivi des classes, suivi de l’élément.

Pour calculer la spécificité, on peut faire un tableau pour savoir comment CSS appliquera les styles :

	IDs	Classes	Elements
.home #banner p	1	1	1
.home #banner p.text	1	2	1
#banner p	1	0	1

Dans le tableau ci-dessus, la deuxième ligne sera celle qui sera appliquée, puis la première, puis la troisième.

Dernière précision, l’ordre dans lequel sont déclarés les sélécteurs n’ont pas d’importance, c’est vraiment leur valeur qui compte.

L’exeption : !important

!important est un mot-clé qui va toujours être plus puissant que n’importe quelle spécificité. Un !important placé dans un seul sélecteur, sera plus puissant que 50 id à la suite.
Par contre si la spécificité est la même alors l’!important déclaré après sera utilisé.