Урок 4 из 53 · 8 мин

Каскад и специфичность

Почему стиль не применился: порядок правил, вес селекторов и !important.

Почему не работает

Я написал .price { color: red }, а цена всё равно зелёная!
Бро
Где-то есть правило сильнее. Когда правила спорят, я смотрю на важность, потом на специфичность, потом на порядок.
Ника
Открой DevTools — там зачёркнуто проигравшее объявление. Это и есть каскад.

Понятие

Каскад

Кто победит

Что это: Порядок решения споров: важность → специфичность → порядок в коде (последнее побеждает).
Зачем: Понимаешь каскад — понимаешь, почему стиль «не работает».
Как: HTML
<style> p { color: green; } p { color: crimson; } </style> <p>Победило последнее правило</p>
Так это выглядит

Понятие

Специфичность

Вес селектора

Что это: Считается как (id, классы, теги): #a = (1,0,0), .a = (0,1,0), p = (0,0,1). Сравнивают слева направо.
Зачем: Поэтому один id сильнее любого числа классов.
Как: HTML
<style> .menu p { color: green; } p { color: crimson; } </style> <div class="menu"><p>.menu p сильнее, чем p</p></div>
Так это выглядит

Значение

!important

Особая важность

Что это: Объявление с !important побеждает обычные независимо от специфичности.
Зачем: Крайняя мера: им легко сломать каскад. Почти всегда проще поправить селектор.
Как: HTML
<style> p { color: green !important; } #x { color: crimson; } </style> <p id="x">!important сильнее даже id</p>
Так это выглядит

Ника
Держи специфичность низкой: классы вместо id, короткие селекторы, без !important.

Ваш ход

Задание

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

Сейчас цена зелёная из-за .card .price. Не трогая это правило, добавь ниже правило с селектором той же силы (.card .price), которое сделает цену crimson.

Есть правило .card .price с цветом crimson — пока нет
Без !important — пока нет

<style>
.card .price { color: green; }
</style>
<div class="card"><span class="price">290 ₽</span></div>

<style>
.card .price { color: green; }
</style>
<div class="card"><span class="price">290 ₽</span></div>

Результат обновляется при вводе

ПрактикаОбязательное задание

Чей вес больше

Выберите один ответ.

Какой селектор специфичнее?

Домашнее заданиеДля закрепления

Равный вес