Pseudoclasa focus-within

Pseudoclasa focus-within definește stilul elementelor care sunt în focalizare. Spre deosebire de pseudoclasa focus, care definește stilul direct elementului însuși, focus-within definește stilul pentru elementul părinte.

Sintaxă

selector:focus-within {

}

Exemplu

Să setăm culoarea de fundal albastră pentru elementul părinte, când elementul copil input este în focalizare:

<div>
	Introduceți numele dvs.: <input name="user">
</div>

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

Vezi și

pseudoclasa :indeterminate,
care definește stilul pentru comutatoarele care se află într-o stare nedeterminată
pseudoclasa :default,
care definește stilul pentru elementele implicite
pseudoclasa :fullscreen,
care definește stilul pentru elementele în modul ecran complet
pseudoclasa :placeholder-shown,
care definește stilul pentru elementele la afișarea textului de sugestie
proprietatea caret-color,
care definește culoarea cursorului text în input