Пріоритет селекторів CSS

Нехай у нас є наступний код:

p {
	color: red;
}
p {
	color: green;
}

Як ви бачите, спочатку абзацам задається червоний колір, а потім нижче – зелений. В цьому випадку другий запис перевизначить перший та абзаци стануть зеленого кольору.

Розкажіть, якого розміру будуть заголовки після виконання наступного коду:

<h2>text</h2>

h2 {
	font-size: 20px;
}
h2 {
	font-size: 30px;
}

Зауваження

Описане стосується лише конфлікту властивостей. Тобто у випадку, коли і в одному селекторі, і у другому є однакові властивості. Якщо властивості різні, то просто застосовуються властивості і одного, і другого селектора.

Розкажіть, які властивості застосовуються до заголовків і які будуть значення цих властивостей:

<h2>text</h2>

h2 {
	font-size: 20px;
	color: blue;
}
h2 {
	font-style: italic;
	color: red;
}

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

У попередньому прикладі обидва селектори були однаковими та мали однаковий пріоритет. Це означає, що перемагала та властивість, яка була написана нижче.

Бувають також ситуації, коли одному елементу сторінки відповідають кілька селекторів. В цьому випадку при конфлікті властивостей переможе більш специфічний, тобто більш точний селектор. Розгляньмо правила специфічності.

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

Клас завжди перемагає селектор тега:

<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; /* застосовується цей колір */
}

Батьки

У всіх попередніх прикладах усі селектори повинні ловити сам елемент. Можливо таке, що один селектор ловить елемент, а другий селектор ловить батька цього елемента.

Ви вже знаєте, що якщо батькові заданий, наприклад, колір, то цей колір успадковуватиметься нащадком. Але якщо нащадку також заданий колір, то селектор нащадка матиме більший пріоритет, ніж селектор батька.

Це означає, що селектор тега нащадка перемагає клас батька:

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

.block {
	color: red;
}
p {
	color: green; /* застосовується цей колір */
}

Селектор тега нащадка також перемагає ідентифікатор батька:

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

#block {
	color: red;
}
.text {
	color: green; /* застосовується цей колір */
}