Règles de spécificité en CSS

Dans l'exemple précédent, les deux sélecteurs étaient identiques et avaient la même priorité. Cela signifie que la propriété qui l'emportait était celle écrite en dernier.

Il existe également des situations où un élément de la page correspond à plusieurs sélecteurs. Dans ce cas, en cas de conflit de propriétés, le sélecteur le plus spécifique, c'est-à-dire le plus précis, l'emportera. Examinons les règles de spécificité.

Première règle

Une classe l'emporte toujours sur un sélecteur de balise :

<p class="text">text</p>

p {
	color: red;
}
.text {
	color: green; /* cette couleur sera appliquée */
}

Deuxième règle

Un identifiant l'emporte toujours sur une classe :

<p id="elem" class="text">text</p>

.text {
	color: red;
}
#elem {
	color: green; /* cette couleur sera appliquée */
}

Troisième règle

À conditions égales, le sélecteur qui l'emporte est celui qui a le plus de parties. Par exemple, si nous avons deux sélecteurs de balises, celui qui l'emportera est celui qui a le plus de balises :

<div>
	<p>text</p>
</div>

p {
	color: red;
}
div p {
	color: green; /* cette couleur sera appliquée */
}

S'il y a deux sélecteurs de classes, celui qui l'emportera est celui dans lequel le plus de classes sont spécifiées (si il y a des sélecteurs de balises, ils n'influent pas) :

<div class="block">
	<p class="text">text</p>
</div>

.text {
	color: red;
}
.block .text {
	color: green; /* cette couleur sera appliquée */
}