Zasady specyficzności w CSS

W poprzednim przykładzie oba selektory były identyczne i miały ten sam priorytet. Oznacza to, że wygrywała ta właściwość, która została zapisana niżej.

Zdarzają się również sytuacje, gdy jednemu elementowi strony odpowiada kilka selektorów. W takim przypadku w przypadku konfliktu właściwości wygra bardziej specyficzny, czyli bardziej precyzyjny selektor. Przyjrzyjmy się zasadom specyficzności.

Zasada pierwsza

Klasa zawsze wygrywa z selektorem tagu:

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

p {
	color: red;
}
.text {
	color: green; /* zastosowany zostanie ten kolor */
}

Zasada druga

Identyfikator zawsze wygrywa z klasą:

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

.text {
	color: red;
}
#elem {
	color: green; /* zastosowany zostanie ten kolor */
}

Zasada trzecia

Przy równych warunkach wygrywa ten selektor, który ma więcej części. Na przykład, jeśli mamy dwa selektory tagów, wygra ten, który ma więcej tagów:

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

p {
	color: red;
}
div p {
	color: green; /* zastosowany zostanie ten kolor */
}

Jeśli dwa selektory klas, wygra ten, w którym określono więcej klas (jeśli tam będą selektory tagów, to nie mają one wpływu):

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

.text {
	color: red;
}
.block .text {
	color: green; /* zastosowany zostanie ten kolor */
}