Пошук уроків, статей та іншого контенту
З’ясуйте, як CSS визначає пріоритет правил за специфічністю селекторів, порядком оголошення та використанням !important.
Специфічність CSS — це набір правил, за якими браузер визначає, який стиль застосувати, якщо кілька CSS-правил впливають на один і той самий елемент.
Наприклад, колір абзацу можуть задавати одразу кілька правил:
p {
color: blue;
}
.article-text {
color: green;
}Якщо абзац має клас article-text, браузер застосує зелений колір, тому що селектор класу має вищу специфічність, ніж селектор елемента.
<p class="article-text">Цей текст буде зеленим.</p>Специфічність допомагає браузеру вирішити конфлікт між правилами.
Специфічність селектора можна умовно описати чотирма рівнями:
Вбудовані стилі в атрибуті style.
Ідентифікатори — селектори на кшталт #header.
Класи, атрибути та псевдокласи — .button, [type="text"], :hover.
Елементи та псевдоелементи — div, p, ::before.
Порівняння відбувається зліва направо: спочатку кількість вбудованих стилів, потім ідентифікаторів, класів і, нарешті, елементів.
Для зручності специфічність часто записують як чотири числа:
(вбудовані стилі, ідентифікатори, класи, елементи)p {
color: red;
}Специфічність:
(0, 0, 0, 1)Селектор містить один елемент p.
.note {
color: blue;
}Специфічність:
(0, 0, 1, 0)Селектор містить один клас.
#main {
color: green;
}Специфічність:
(0, 1, 0, 0)Селектор містить один ідентифікатор.
article.note {
color: purple;
}Специфічність:
(0, 0, 1, 1)Селектор містить один клас і один елемент.
#main .note p {
color: orange;
}Специфічність:
(0, 1, 1, 1)Селектор містить один ідентифікатор, один клас і один елемент.
Розглянемо кілька правил:
p {
color: red;
}
.note {
color: blue;
}
#important-note {
color: green;
}Елемент:
<p id="important-note" class="note">Важливий текст</p>Для нього підходять усі три правила:
p має специфічність (0, 0, 0, 1);
.note має специфічність (0, 0, 1, 0);
#important-note має специфічність (0, 1, 0, 0).
Найвищу специфічність має селектор з ідентифікатором, тому текст буде зеленим.
Важливо: кількість елементів не може «перемогти» наявність класу або ідентифікатора.
Наприклад:
main section article p {
color: red;
}
.text {
color: blue;
}Специфічність селекторів:
main section article p → (0, 0, 0, 4)
.text → (0, 0, 1, 0)Переможе .text, тому що клас має більшу вагу, ніж будь-яка кількість селекторів елементів.
Деякі частини селекторів не збільшують специфічність:
універсальний селектор *;
комбінатори >, +, ~, пробіл;
:where(...) — його вміст також має нульову специфічність.
Наприклад:
* {
box-sizing: border-box;
}Універсальний селектор * не додає специфічності.
Комбінатори також не додають її:
.card > p {
color: blue;
}Тут специфічність визначають лише:
.card — один клас;
p — один елемент.
Отже:
(0, 0, 1, 1)Якщо два правила мають однакову специфічність, браузер застосовує правило, яке оголошене пізніше.
.message {
color: blue;
}
.message {
color: red;
}Обидва селектори однакові, тому переможе друге правило. Текст буде червоним.
Порядок важливий лише після порівняння специфічності. Наприклад:
.message {
color: blue;
}
#warning {
color: red;
}Навіть якщо правило з .message оголошене першим, колір буде червоним, бо #warning має вищу специфічність.
Якщо поміняти правила місцями, результат не зміниться:
#warning {
color: red;
}
.message {
color: blue;
}Ідентифікатор усе одно має більшу специфічність, ніж клас.
Стиль, записаний безпосередньо в атрибуті style, має дуже високу специфічність:
<p class="message" style="color: purple;">
Цей текст буде фіолетовим.
</p>Навіть таке правило зазвичай не змінить колір:
.message {
color: blue;
}Вбудований стиль має перевагу над звичайним правилом із таблиці стилів.
Використовуйте вбудовані стилі обережно. Вони ускладнюють підтримку коду, тому для більшості випадків краще створювати класи в CSS.
!importantКлючове слово !important підвищує пріоритет конкретного CSS-оголошення:
.message {
color: blue !important;
}
#warning {
color: red;
}У цьому випадку текст буде синім, тому що оголошення color: blue !important має вищий пріоритет, ніж звичайне оголошення color: red.
!important належить до каскаду, а не до самої специфічності. Воно не змінює числове значення специфічності селектора, але змушує браузер спочатку порівнювати важливі оголошення зі звичайними.
Якщо два правила обидва містять !important, тоді знову застосовуються специфічність і порядок оголошення:
.message {
color: blue !important;
}
#warning {
color: red !important;
}Для елемента з id="warning" переможе правило з #warning, бо його специфічність вища.
Якщо специфічність однакова:
.message {
color: blue !important;
}
.message {
color: red !important;
}Переможе останнє правило — текст буде червоним.
!importantУ звичайному коді !important краще не використовувати без потреби. Надмірне застосування створює нові конфлікти: потім доводиться додавати ще більше !important, щоб перевизначити попередні правила.
Перед використанням перевірте:
чи можна використати більш відповідний клас;
чи не має селектор зайво високої специфічності;
чи можна змінити порядок підключення або оголошення стилів;
чи не залишилося старе правило, яке більше не потрібне.
У цьому прикладі браузер порівнює кілька правил для одного абзацу:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Специфічність CSS</title>
<style>
p {
color: red;
}
.message {
color: blue;
}
article .message {
color: green;
}
#warning {
color: orange;
}
#warning {
color: purple;
}
</style>
</head>
<body>
<article>
<p id="warning" class="message">
Який колір матиме цей текст?
</p>
</article>
</body>
</html>Для абзацу підходять усі правила:
p → (0, 0, 0, 1)
.message → (0, 0, 1, 0)
article .message → (0, 0, 1, 1)
#warning → (0, 1, 0, 0)Селектор #warning має найвищу специфічність серед цих правил. Оскільки два правила з #warning мають однакову специфічність, перемагає останнє з них.
Тому текст буде фіолетовим.
Для простого та передбачуваного CSS:
використовуйте класи для стилізації елементів;
не покладайтеся на ідентифікатори для звичайного оформлення;
не створюйте надто довгі селектори;
не додавайте !important без вагомої причини;
якщо правила мають однакову специфічність, використовуйте зрозумілий порядок оголошення.
Наприклад, цей селектор занадто залежить від структури HTML:
.page main article section p.message {
color: blue;
}Простіший варіант:
.message {
color: blue;
}Клас легше повторно використати, а його поведінка менше залежить від вкладеності елементів.
Пізніше правило не завжди перемагає. Воно перемагає лише тоді, коли специфічність правил однакова.
.note {
color: blue;
}
#special-note {
color: red;
}Якщо елемент має id="special-note" і клас note, він буде червоним незалежно від порядку цих правил.
Селектор із багатьма елементами може програти одному класу:
body main section article p {
color: red;
}
.text {
color: blue;
}Переможе .text.
!importantТакий підхід ускладнює пошук причин конфліктів:
.title {
color: blue !important;
}
.title {
color: red !important;
}Краще спочатку зрозуміти, чому виник конфлікт, і виправити селектори або порядок правил.
Атрибут style має вищий пріоритет за звичайний стиль із CSS-файлу:
<p class="title" style="color: green;">Текст</p>.title {
color: red;
}У результаті текст буде зеленим.
Специфічність визначає, яке CSS-правило має перевагу над іншим.
Ідентифікатори мають вищу специфічність, ніж класи.
Класи, атрибути та псевдокласи мають вищу специфічність, ніж елементи.
Якщо специфічність однакова, перемагає правило, оголошене пізніше.
Вбудовані стилі мають дуже високий пріоритет.
!important підвищує пріоритет оголошення, але його не варто використовувати без потреби.
Для підтримуваного CSS найчастіше достатньо зрозумілих класів і помірної специфічності.