Pseudotřída focus-within

Pseudotřída focus-within nastavuje styl prvkům, které jsou ve fokusu. Na rozdíl od pseudotřídy focus, která nastavuje styl přímo samotnému prvku, focus-within nastavuje styl pro rodičovský prvek.

Syntaxe

selektor:focus-within {

}

Příklad

Nastavme modrou barvu pozadí rodičovskému prvku, když je jeho potomkovský prvek input ve fokusu:

<div>
	Zadejte své jméno: <input name="user">
</div>

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

Viz také

pseudotřída :indeterminate,
která nastavuje styl přepínačům, které jsou v neurčitém stavu
pseudotřída :default,
která nastavuje styl prvkům podle výchozího nastavení
pseudotřída :fullscreen,
která nastavuje styl prvkům v režimu celé obrazovky
pseudotřída :placeholder-shown,
která nastavuje styl prvkům při zobrazení textu-nápovědy
vlastnost caret-color,
která nastavuje barvu textového kurzoru v inputu