Pseudokelas focus-within

Pseudokelas focus-within menetapkan gaya kepada elemen yang berada dalam fokus. Berbeza dengan pseudokelas focus, yang menetapkan gaya secara langsung kepada elemen itu sendiri, focus-within menetapkan gaya untuk elemen induk.

Sintaks

cssselector:focus-within {

}

Contoh

Mari tetapkan warna latar belakang biru kepada elemen induk, apabila elemen anak input berada dalam fokus:

html<div>
  Masukkan nama anda: <input name="user">
</div>

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

Результат:

Lihat juga