Псевдокласс 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,
инпуттагы текст курсорунун түсүн белгилейт