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

Псевдокласс `focus-within` задает стиль элементам, которые находятся в фокусе. В отличие от псевдокласса `focus`, который задает стиль непосредственно самому элементу, `focus-within` задает стиль для элемента-родителя.

## Синтаксис

`селектор:focus-within { }`

## Пример

Давайте зададим голубой цвет фону элемента-родителя, когда его дочерний элемент инпут находится в фокусе:

`<div> Введите ваше имя: <input name="user"> </div>` `div { width: 300px; height: 50px; padding: 10px; } div:focus-within { background-color: #C2DDFD; }`

:

## Смотрите также

- псевдокласс `:indeterminate`,
  который задает стиль переключателям, которые находятся в неопределенном состоянии
- псевдокласс `:default`,
  который задает стиль элементам по умолчанию
- псевдокласс `:fullscreen`,
  который задает стиль элементам в полноэкранном режиме
- псевдокласс `:placeholder-shown`,
  который задает стиль элементам при отображении текста-подсказки
- свойство `caret-color`,
  которое задает цвет текстовому курсору в инпуте

← →
↑
en ru