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

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

Синтаксис

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

}

Пример

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

html<div>
  Введите ваше имя: <input name="user">
</div>

cssdiv {
  width: 300px;
  height: 50px;
  padding: 10px;
}
div:focus-within {
  background-color: #C2DDFD;
}

Результат:

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