В этом небольшом обзоре мы рассмотрим для каких целей в CSS нужен псевдокласс :focus-within и как его можно применять.

Псевдокласс focus-within относится к элементу, который находится в фокусе, или к элементу, который содержит потомков, находящихся в фокусе.

Состояние в фокусе (:focus) - это состояние элемента при клике по нему мышкой или при выборе с помощью клавиши Tab на клавиатуре. Например, это состояние свойственно для поля ввода или ссылки.

У псевдокласса :focus-within есть существенное отличие от :focus. Так, псевдокласс :focus применяется только для элемента, находящегося в фокусе, не распространяясь на его родителя.

Например:

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

Поэтому :focus-within может быть полезен в различных ситуациях. Например:

1. Для изменения свойств формы, когда одно из ее полей ввода находится в фокусе.
2. Для изменения параметров (цвета) строки таблицы при выборе одной из ее ячеек.

Вот пример использования :focus-within для формы, при выборе одного из ее полей ввода:

В 2020 году псевдокласс :focus-within поддерживается практически всеми ведущими браузерами, кроме Internet Explorer.

Спасибо за внимание.