Regole di specificità in CSS

Nell'esempio precedente entrambi i selettori erano identici e avevano la stessa priorità. Ciò significa che veniva applicata la proprietà che era scritta più in basso.

Ci sono anche situazioni in cui a un elemento della pagina corrispondono diversi selettori. In questo caso, in caso di conflitto tra proprietà, vincerà il selettore più specifico, cioè più preciso. Esaminiamo le regole di specificità.

Prima regola

Una classe batte sempre il selettore di tag:

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

p {
	color: red;
}
.text {
	color: green; /* verrà applicato questo colore */
}

Seconda regola

Un identificatore batte sempre una classe:

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

.text {
	color: red;
}
#elem {
	color: green; /* verrà applicato questo colore */
}

Terza regola

A parità di condizioni, vince il selettore che ha più parti. Ad esempio, se abbiamo due selettori di tag, vincerà quello che ha più tag:

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

p {
	color: red;
}
div p {
	color: green; /* verrà applicato questo colore */
}

Se ci sono due selettori di classe, vincerà quello in cui sono specificate più classi (se sono presenti selettori di tag, questi non influiscono):

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

.text {
	color: red;
}
.block .text {
	color: green; /* verrà applicato questo colore */
}