Почему не меняется родительский элемент при активном дочернем?

Question

[Jake Taylor]

При наведении на родительский элемент #search меняется цвет его рамки - всё ОК.
Но почему при активном элементе .input-style:active не меняется рамка его родительского элемента #search, поведение которого описано так:

.input-style:active #search {
    border: 1px solid #4285F4;
}

https://jsfiddle.net/L3hzm5we/

Comments

[Lynn «Кофеман»]

Потому что css так не работает.
Это обращение к ребёнку с id=search (такого просто нет)

В css нельзя обратиться к родительскому элементу.

[Jake Taylor]

Lynn «Кофеман», как правильно должен выглядеть код в данной ситуации?

[Вадим]

Jake Taylor, покажите Html структуру и чётко опишите что Вы хотите.

Answer 1

[Валерий]

Заменить

.input-style:active #search {
    border: 1px solid #4285F4;
}

на

#search:focus-within {
    border: 1px solid #4285F4;
}