Fokus-within-pseudoluokka

Pseudoluokka focus-within asettaa tyylin elementeille, jotka ovat fokuksessa. Toisin kuin pseudoluokka focus, joka asettaa tyylin suoraan itse elementille, focus-within asettaa tyylin vanhempielementille.

Syntaksi

valitsija:focus-within {

}

Esimerkki

Asetetaan vaaleansininen taustaväri vanhempielementille, kun sen lapsielementti input on fokuksessa:

<div>
	Kirjoita nimesi: <input name="user">
</div>

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

Katso myös

pseudoluokka :indeterminate,
joka asettaa tyylin kytkimille, jotka ovat määrittämättömässä tilassa
pseudoluokka :default,
joka asettaa tyylin oletuselementeille
pseudoluokka :fullscreen,
joka asettaa tyylin elementeille koko näytön tilassa
pseudoluokka :placeholder-shown,
joka asettaa tyylin elementeille, kun vihjeteksti näytetään
ominaisuus caret-color,
joka asettaa värin tekstikursorille input-kentässä