Где пригодится :has()
Вопрос
Что такое :has() и как ты бы его применил в реальном интерфейсе?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Выбирает элемент по его потомкам или следующим соседям, это «родительский селектор»
Пример: подсветить поле формы, если внутри невалидный инпут: `.field:has(input:user-invalid)`
Пример: другая раскладка карточки, если в ней есть картинка
Пример: запретить прокрутку страницы, когда открыт диалог: `body:has(dialog[open])`
Специфичность равна самому тяжёлому аргументу
Раньше такие вещи делались классом из JavaScript, теперь чистым CSS
Что могут спросить следом
- Можно ли через
:has()выбрать предыдущего соседа? - Чем
:user-invalidлучше:invalidдля подсветки ошибок? - Есть ли у
:has()цена по производительности?
Разбор
:has() выбирает элемент, если относительно него находится что-то по селектору в скобках: потомок, прямой ребёнок или следующий сосед. По сути это долгожданный родительский селектор, и он работает во всех основных браузерах. Где применяю: в формах подсвечиваю обёртку поля и подпись, когда внутри невалидный инпут, через .field:has(input:user-invalid), и это без единой строки JavaScript. В карточках меняю раскладку, если есть картинка: .card:has(img) получает сетку в две колонки. Когда открыт модальный диалог, пишу body:has(dialog[open]) { overflow: hidden; }. Через h2:has(+ p) можно управлять отступом заголовка в зависимости от того, что за ним идёт, то есть фактически выбрать предыдущего соседа. Специфичность у :has() берётся от самого тяжёлого аргумента, это стоит помнить. И я не вешаю очень широкие :has() на body с глубокими селекторами на каждый чих, потому что браузеру приходится перепроверять их при изменениях DOM.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.