Селектор :has(): «родитель с потомком» без JavaScript
Стилизация карточки с ошибкой формы, пустой корзины и активного пункта меню на чистом CSS.
`:has()` — «родительский» селектор: например, `.card:has(.error)` подсвечивает карточку при невалидном поле внутри.
Производительность: браузер пересчитывает селектор при изменении DOM — не вешайте тяжёлые `:has(*)` на `body`.
- :has() — MDN — Синтаксис и поддержка.
- The :has() selector — web.dev — Практические примеры.
Паттерны
Комбинируйте с `:not(:has(img))` для placeholder-состояния каталога.
Для логики бизнес-правил по-прежнему нужен JS — `:has()` только для визуала.