Управляем состоянием интерфейса через :has()!

Чтобы изменить стиль родителя, когда вложенный элемент находится в активном состоянии делают:
parent.classList.toggle('open', child.checked)

Но CSS может делать это сам:
.card:has(.toggle:checked) .content {
max-height: 400px;
}

Если внутри .card есть элемент .toggle, который checked, то .content автоматически раскрывается.

Изменение внешнего вида родителя в зависимости от действий пользователя:
.input:has(input:focus) {
border-color: #4da3ff;
}

Подсветка активного пункта меню:
nav:has(a.active) {
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

Родитель сам понимает, что внутри есть активный элемент.

Code Ready | #совет