Псевдокласът focus-within

Псевдокласът focus-within задава стил на елементи, които са във фокус. За разлика от псевдокласа focus, който задава стил директно на самия елемент, focus-within задава стил за родителския елемент.

Синтаксис

селектор:focus-within {

}

Пример

Нека зададем син цвят на фона на родителския елемент, когато неговото дъщерно поле за въвеждане е във фокус:

<div>
	Въведете вашето име: <input name="user">
</div>

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

Вижте също

псевдоклас :indeterminate,
който задава стил на превключватели, които са в неопределено състояние
псевдоклас :default,
който задава стил на елементи по подразбиране
псевдоклас :fullscreen,
който задава стил на елементи в цялоекранен режим
псевдоклас :placeholder-shown,
който задава стил на елементи при показване на текст-подсказка
свойство caret-color,
което задава цвят на текстовия курсор в полето за въвеждане