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

Результат:

Сондай-ақ қараңыз