Как менять родительский элемент с помощью CSS :has()

Раньше CSS не позволял выбрать родительский элемент в зависимости от того, что находится внутри него. Для этого приходилось добавлять JavaScript или отдельные классы.
Теперь можно использовать псевдокласс :has().
Например, подсветим поле формы, если внутри него есть элемент с ошибкой:
.form-field:has(.error) {
border-color: #ff4d67;
background: #fff3f5;
}

Или изменим карточку, если внутри находится выбранный чекбокс:
.card:has(input:checked) {
border-color: #3185ff;
transform: translateY(-2px);
}

Также :has() удобно использовать для проверки соседних элементов:
.item:has(+ .item.active) {
opacity: 0.6;
}

Главное преимущество — можно строить интерактивные состояния интерфейса без лишних классов и небольших JavaScript-обработчиков.
Используйте :has() для форм, карточек, меню, фильтров и компонентов, состояние которых зависит от вложенного содержимого.