:has(): оформление элемента по состоянию его содержимого
Has позволяет выбрать элемент на основе относительного селектора внутри него или рядом с ним. Один из сценариев — выделить подпись, содержащую отмеченный чекбокс.
Назначение
Has позволяет выбрать элемент на основе относительного селектора внутри него или рядом с ним. Один из сценариев — выделить подпись, содержащую отмеченный чекбокс.
Как это работает
В примере условие проверяет input:checked внутри label. Нативный input сохраняет выбор и клавиатурное управление даже без декоративного правила. Поддержку селектора можно проверить через supports selector().
Пример
<style>.option-box{display:block;padding:1rem;border:1px solid #789a84;margin:.5rem 0}@supports selector(:has(*)){.option-box:has(input:checked){background:#e3f5e9;border-color:#176b50}}</style>
<label class="option-box"><input type="checkbox" checked> Показывать примеры</label>
<label class="option-box"><input type="checkbox"> Показывать дополнительные задачи</label>Что должно получиться
В поддерживающем браузере фон подписи меняется вместе с состоянием чекбокса. Без has остаётся обычный работающий контрол с видимой отметкой.
Граница применения и частая ошибка
Не используйте чрезмерно широкие условия на корне страницы без необходимости. Has не допускает произвольного вложения has внутри has. Оформление не заменяет настоящую связь label и поля или проверку введённых данных.
Самостоятельная проверка
Измените чекбокс мышью и клавиатурой, затем отключите правило. Проверьте сохранение поведения формы. Ограничьте селектор нужным компонентом и сравните читаемость с добавлением класса состояния через JavaScript.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.