A focus-within pszeudoosztály

A focus-within pszeudoosztály stílust határoz meg azoknak az elemeknek, amelyek fókuszban vannak. A focus pszeudoosztálytól eltérően, amely közvetlenül magának az elemnek határozza meg a stílusát, a focus-within a szülőelem stílusát határozza meg.

Szintaxis

szelektor:focus-within {

}

Példa

Állítsuk be a szülőelem háttérszínét világoskékre, amikor annak gyermek input eleme fókuszban van:

<div>
	Adja meg a nevét: <input name="user">
</div>

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

Lásd még

a :indeterminate pszeudoosztály,
amely stílust határoz meg a határozatlan állapotban lévő kapcsolóknak
a :default pszeudoosztály,
amely stílust határoz meg az alapértelmezett elemeknek
a :fullscreen pszeudoosztály,
amely stílust határoz meg a teljes képernyős módban lévő elemeknek
a :placeholder-shown pszeudoosztály,
amely stílust határoz meg az elemeknek a helykitöltő szöveg megjelenítésekor
a caret-color tulajdonság,
amely meghatározza a szöveges kurzor színét az input mezőkben