Выбор ответа Middle Селекторы и специфичность обновлено
:is() против :where()
Вопрос
Какого цвета будет заголовок <h2 class="title"> внутри <section id="promo">?
:where(#promo) h2 { color: red; }
h2.title { color: green; }
:is(#promo) h2 { color: blue; }
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Синего: :is() берёт специфичность аргумента, получается (1, 0, 1). :where() всегда даёт ноль, поэтому первое правило весит (0, 0, 1). h2.title весит (0, 1, 1). :is(promo) h2 берёт специфичность самого тяжёлого аргумента, это id, итого (1, 0, 1) и победа.
Варианты ответа
- Красного: правило с id первое и самое специфичное
- Зелёного: у
:where(#promo) h2и:is(#promo) h2одинаковый вес, а уh2.titleбольше - Синего:
:is()берёт специфичность аргумента, получается (1, 0, 1)правильный ответ - Зелёного:
h2.titleединственный селектор с классом
Разбор
:where() всегда даёт ноль, поэтому первое правило весит (0, 0, 1). h2.title весит (0, 1, 1). :is(#promo) h2 берёт специфичность самого тяжёлого аргумента, это id, итого (1, 0, 1) и победа. Первый вариант не знает, что :where() обнуляет вес. Второй ошибочно считает :is и :where одинаковыми. Четвёртый игнорирует id внутри :is().
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.