Как задать css селекктор родителя для input:focus?

Question

[Persotr27]

Такая ситуация. Есть div, а в нём input. Как сделать так, что бы при фокусе на inputе, менялся стиль дива (родительского). Что-то говорят, без JS это пока невозможно, еще нашел вариант с :has() но не оч понял как оно работает. Вообщем, буду благодарен за помощь.
И как на JS сделать тогда?)

Comments

[Brad9aga]

https://learn.javascript.ru/focus-blur

Answer 1

[Rustam Bainazarov]

Вам очень повезло, ибо в данном случае в CSS есть псевдокласс :focus-within. Он позволяет стилизовать предка, внутри которого поле в фокусе (спасибо Xdevelx за поправку терминологии, см. комментарии). Поддержка нормальная у него:
https://caniuse.com/#search=%3Afocus-within


Во всех остальных случаях пока что CSS не может идти выше по коду. Если нужно универсальное решение с поддержкой IE и старых EDGE — только JS.

:has — только в черновиках, ни в одном браузере его поддержки нет:
https://caniuse.com/#search=%3Ahas

Comments

[Rustam Bainazarov]

Xdevelx, а, да, конечно, можно. Я сам так недавно фон body красил в другой цвет с помощью этого.

Я просто забыл про эту терминологию, т. к. у меня в голове косая её версия «прямой родитель» (родитель) и просто «родитель» (предок). Мне так удобнее в размышлениях, LOL. Не нравится слово «предок».

Но это неправильно, поэтому поправил, спасибо!

[Persotr27]

Спасибо за помощь)