Выбор ответа Middle Архитектура CSS обновлено
Нативная вложенность CSS
Вопрос
Что верно про этот код в современном браузере без препроцессора?
.card {
padding: 16px;
&:hover { outline: 2px solid; }
.title { font-weight: 600; }
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Работают оба вложенных правила: .card:hover и .card .title. Нативная вложенность поддерживается всеми основными браузерами.
Варианты ответа
- Код не сработает: вложенность есть только в Sass и Less
- Сработает только правило
&:hover, вложенный.titleбез&проигнорируется - Работают оба вложенных правила:
.card:hoverи.card .titleправильный ответ &означает дочерний комбинатор: правило станет.card > :hover
Разбор
Нативная вложенность поддерживается всеми основными браузерами. Вложенный селектор без & трактуется как потомок родителя, то есть .card .title. &:hover подставляет родителя на место & и даёт .card:hover. & означает сам родительский селектор, а не комбинатор >.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.