Pseudoklasa focus-within

Pseudoklasa focus-within określa styl elementom, które znajdują się w fokusie. W przeciwieństwie do pseudoklasy focus, która określa styl bezpośrednio samemu elementowi, focus-within określa styl dla elementu-rodzica.

Składnia

selektor:focus-within {

}

Przykład

Ustawmy niebieski kolor tła elementu-rodzica, gdy jego element potomny input znajduje się w fokusie:

<div>
	Wprowadź swoje imię: <input name="user">
</div>

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

Zobacz też

pseudoklasa :indeterminate,
która określa styl przełącznikom, które znajdują się w stanie nieokreślonym
pseudoklasa :default,
która określa styl elementom domyślnym
pseudoklasa :fullscreen,
która określa styl elementom w trybie pełnoekranowym
pseudoklasa :placeholder-shown,
która określa styl elementom przy wyświetlaniu tekstu-podpowiedzi
właściwość caret-color,
która określa kolor tekstowego kursora w inpucie