Каскадування — це механізм, який управляє кінцевим результатом, якщо декілька конфліктуючих правил CSS застосовуються до одного елемента.
Існує три основні концепції, які регулюють порядок, у якому застосовуються CSS-оголошення:
Важливість CSS-оголошення залежить від того, у якій таблиці стилів воно визначене.
Ми використовуватимемо лише таблиці стилів автора, тому всі оголошення матимуть однакову важливість.
Специфічність можна уявити як міру того, наскільки конкретним є селектор певного правила.
Селектор з низькою специфічністю може відповідати багатьом елементам (наприклад, *, який відповідає кожному елементу в документі), тоді як селектор з високою специфічністю може відповідати лише одному елементу на сторінці (наприклад, #nav, який відповідає тільки елементу з id, що збігається з nav).
Перемагає правило селектора з більш високою специфічністю.
Документ у блокноті:
Таблиця стилів:
Правило селектора p конфліктує з правилом селектора body. Але p має вищу специфічність, ніж body, тому перший абзац буде світло-блакитним.
Правило селектора p конфліктує з правилом селектора #spec, але #spec має вищу специфічність, ніж p, тому другий абзац буде червоним.
Документ у браузері:
Якщо два правила впливають на один і той же елемент, мають однакову важливість і однакову специфічність, то остаточне рішення визначає порядок вихідного коду.
Правило, яке з’являється у таблиці стилів пізніше, перемагає ті, що йдуть раніше.
Для того ж документа додамо ще одне правило для селектора p. Таблиця стилів:
Колір тексту абзацу буде зеленим, оскільки це правило розташоване пізніше.
Однак абзац з <p id='spec'> залишиться червоним, бо цей селектор має вищу специфічність. Це чітко показує, що специфічність має вищий пріоритет, ніж порядок вихідного коду.
Документ у браузері:
