Псеўдаклас 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;
}

Результат:

Глядзіце таксама