Как работает псевдокласс :focus-within в CSS?

Псевдокласс :focus-within в CSS позволяет стилизовать элемент, если у него или любого из его внутренних (дочерних) элементов есть фокус. www.8host.com

В отличие от псевдокласса :focus, который применяется непосредственно к самому элементу, :focus-within работает для родителя. webref.ru Это обеспечивает чёткую визуальную обратную связь для вложенных элементов, когда они находятся в фокусе. www.dev-notes.ru

Псевдокласс :focus-within используется в двух случаях: doka.guide

1. Если к этому элементу применяется псевдокласс :focus. doka.guide
2. Если к потомку этого элемента применяется псевдокласс :focus. doka.guide Потомок не обязательно должен быть прямым. doka.guide

Пример применения: форма, в которой элемент-контейнер должен быть оформлен определённым образом, когда пользователь фокусируется на одном из элементов ввода. www.8host.com

Чтобы :focus-within работал должным образом, нужно убедиться, что на внутренних элементах контейнера можно фокусироваться. www.8host.com По умолчанию фокусируемыми являются входные элементы, но такие элементы, как div, img или p — нет. www.8host.com Чтобы сделать элемент фокусируемым, можно использовать атрибут tabindex. www.8host.com