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

Результат:

Погледајте такође