Pseudoklasė focus-within

Pseudoklasė focus-within nustato stilių elementams, kurie yra fokuse. Skirtingai nuo pseudoklasės focus, kuri nustato stilių tiesiogiai pačiam elementui, focus-within nustato stilių tėviniam elementui.

Sintaksė

selektorius:focus-within {

}

Pavyzdys

Nustatykime šviesiai mėlyną tėvinio elemento foną, kai jo vaikinis įvesties laukas yra fokuse:

<div>
	Įveskite savo vardą: <input name="user">
</div>

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

Taip pat žiūrėkite

pseudoklasė :indeterminate,
kuri nustato stilių perjungikliams, kurie yra neapibrėžtoje būsenoje
pseudoklasė :default,
kuri nustato stilių numatytiesiems elementams
pseudoklasė :fullscreen,
kuri nustato stilių elementams pilno ekrano režime
pseudoklasė :placeholder-shown,
kuri nustato stilių elementams, kai rodomas užuominos tekstas
savybė caret-color,
kuri nustato teksto žymeklio spalvą įvesties lauke