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