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

Результат:

Шунингдек қаранг