:focus-within

La pseudo-clase CSS :focus-within representa un elemento que ha recibido el foco o que contiene un elemento que ha recibido el foco. En otras palabras, representa un elemento que en sí coincide con la pseudoclase :focus o tiene descendientes que coincidan con :focus. (Esto incluye descendientes en shadow DOM)

/* Selecciona un <div> cuando uno de sus descendientes recibe el foco*/
div:focus-within {
  background: cyan;
}

Este selector es útil, por tomar un ejemplo común, para resaltar un contenedor <form> completo cuando el usuario enfoca sobre uno de sus elementos <input>.

Sintaxis

:focus-within

Ejemplos

En este ejemplo, el formulario recibirá estilos de color especiales cuando cualquiera de las entradas de texto reciba el foco.

HTML

<p>Intenta escribir en este formulario.</p>

<form>
  <label for="given_name">Nombre:</label>
  <input id="given_name" type="text">
  <br>
  <label for="family_name">Apellido:</label>
  <input id="family_name" type="text">
</form>

CSS

form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}

Resultado

Especificaciones

Especificación Estado Comentario
Selectors Level 4
La definición de ':focus-within' en esta especificación.
Working Draft Definición inicial.

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también