Псевдокласс :focus-within

Обновлено: 26.05.2022

Псевдокласс :focus-within

Псевдокласс :focus-within определяет стиль элемента, когда он сам или элементы внутри него получают фокус. В отличие от :focus, который применяется непосредственно к самому элементу, :focus-within работает для родителя. Это позволяет выделять цветом или другими методами всю форму или отдельные её части, когда пользователь работает с полями формы.

Синтаксис

<i>Селектор</i>:focus-within { ... }

Пример

В данном примере меняется цвет фона у <div>, когда текстовое поле внутри него получает фокус (рис. 1).

Рис. 1. Использование :focus-within

Браузеры

:focus-within

Посмотреть совместимость на Can I use?

:focus-within