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

cssselector:focus-within {

}

Ejemplo

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

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

cssdiv {
  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