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

selector:focus-within {

}

Contoh

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

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

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

Lihat juga

pseudokelas :indeterminate,
yang menetapkan gaya kepada suis yang berada dalam keadaan tidak tentu
pseudokelas :default,
yang menetapkan gaya kepada elemen secara lalai
pseudokelas :fullscreen,
yang menetapkan gaya kepada elemen dalam mod skrin penuh
pseudokelas :placeholder-shown,
yang menetapkan gaya kepada elemen apabila teks petunjuk dipaparkan
sifat caret-color,
yang menetapkan warna kursor teks dalam input