Pseudoklasa focus-within

Pseudoklasa focus-within zadaje stil elementima koji su u fokusu. Za razliku od pseudoklase focus, koja zadaje stil direktno samom elementu, focus-within zadaje stil za roditeljski element.

Sintaksa

selektor:focus-within {

}

Primer

Hajde da zadamo plavu boju pozadine roditeljskom elementu, kada je njegov podređeni input element u fokusu:

<div>
	Unesite vaše ime: <input name="user">
</div>

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

Pogledajte takođe

pseudoklasa :indeterminate,
koja zadaje stil prekidačima koji su u neodređenom stanju
pseudoklasa :default,
koja zadaje stil elementima po podrazumevanim vrednostima
pseudoklasa :fullscreen,
koja zadaje stil elementima u režimu celog ekrana
pseudoklasa :placeholder-shown,
koja zadaje stil elementima pri prikazivanju teksta-saveta
svojstvo caret-color,
koje zadaje boju tekstualnom kursoru u input polju