Pseudoclase focus-within

La pseudoclase focus-within define el estilo para elementos que están en foco. A diferencia de la pseudoclase focus, que define el estilo directamente al elemento mismo, focus-within define el estilo para el elemento padre.

Sintaxis

selector:focus-within {

}

Ejemplo

Vamos a establecer un color de fondo azul para el elemento padre, cuando su elemento hijo input está en foco:

<div>
	Ingresa tu nombre: <input name="user">
</div>

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

Ver también

seudoclase :indeterminate,
que define el estilo para interruptores que están en un estado indeterminado
seudoclase :default,
que define el estilo para elementos por defecto
seudoclase :fullscreen,
que define el estilo para elementos en modo de pantalla completa
seudoclase :placeholder-shown,
que define el estilo para elementos cuando se muestra el texto de sugerencia
propiedad caret-color,
que define el color del cursor de texto en el input