Начало распродаж · Скидка на доставку · Поступление новой коллекции

BELAYA KASKA / FEATURE

designАвтор: Пуск‑Медиа (импорт)Просмотры: 3

:has() — стили родителя от состояния потомка

Карточка с выбранным чекбоксом без JS.

Изображение статьи: :has() — стили родителя от состояния потомка

Селектор .card:has(input:checked) подсвечивает всю карточку тарифа, когда отмечен radio внутри — меньше классов на корне.

:has() повышает специфичность: держите правила в слое компонентов, не в глобальном reset.

- [:has() — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) — Relational pseudo-class.

- [:has() — web.dev](https://web.dev/articles/has) — Практики и примеры.

---

## Доступность

Не заменяйте :focus-within там, где важен именно фокус клавиатуры — :has(:focus-visible) точнее для кольца фокуса.

#CSS#селекторы#UI

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.