Правила специфичности в CSS

В предыдущем примере оба селектора были одинаковыми и имели одинаковый приоритет. Это значит, что побеждало то свойство, которое было написано ниже.

Бывают также ситуации, когда одному элементу страницы соответствуют несколько селекторов. В этом случае при конфликте свойств победит более специфичный, то есть более точный селектор. Давайте рассмотрим правила специфичности.

Правило первое

Класс всегда побеждает селектор тега:

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

p {
	color: red;
}
.text {
	color: green; /* применится этот цвет */
}

Результат выполнения кода:

Правило второе

Идентификатор всегда побеждает класс:

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

.text {
	color: red;
}
#elem {
	color: green; /* применится этот цвет */
}

Результат выполнения кода:

Правило третье

При равных условиях побеждает тот селектор, у которого больше частей. Например, если у нас два селектора тегов, то победит тот, у которого тегов больше:

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

p {
	color: red;
}
div p {
	color: green; /* применится этот цвет */
}

Результат выполнения кода:

Если два селектора классов, то победит тот, в котором указано больше классов (если там будут селекторы тегов, то они не влияют):

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

.text {
	color: red;
}
.block .text {
	color: green; /* применится этот цвет */
}

Результат выполнения кода: