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