Псевдокласси focus-within

Псевдокласси focus-within услубро барои элементҳое, ки дар фокуси ҳастанд, таъйин мекунад. Ба фарқи псевдокласси focus, ки услубро ба худ элемент таъйин мекунад, focus-within услубро барои элементи волидайн таъйин мекунад.

Синтаксис

интихобкунанда:focus-within {

}

Намуна

Биёед ранги заминаи элементи волидайнро кабуд кунем, вақте ки фарзанди элемент инпут дар фокуси аст:

<div>
	Номи худро ворид кунед: <input name="user">
</div>

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

Ҳамчунин бубинед

псевдокласси :indeterminate,
ки услубро барои тугмаҳои гузариши ҳолати номуайян таъйин мекунад
псевдокласси :default,
ки услубро барои элементҳои пешфарз таъйин мекунад
псевдокласси :fullscreen,
ки услубро барои элементҳо дар реҷаи пурраэкранӣ таъйин мекунад
псевдокласси :placeholder-shown,
ки услубро барои элементҳо ҳангоми намоиши матни роҳнамо таъйин мекунад
хосияти caret-color,
ки ранги курсори матниро дар инпут таъйин мекунад