La pseudo-clase CSS :focus-within respresenta 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

Ejemplo

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 60Edge Sin soporte No
Notas
Sin soporte No
Notas
Notas This feature is not implemented. See the enhancement request.
Firefox Soporte completo 52IE Sin soporte NoOpera Soporte completo 47Safari Soporte completo 10.1WebView Android Soporte completo 60Chrome Android Soporte completo 60Edge Mobile Sin soporte No
Notas
Sin soporte No
Notas
Notas This feature is not implemented. See the enhancement request.
Firefox Android Soporte completo 52Opera Android Soporte completo 47Safari iOS Soporte completo 10.3Samsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Ver notas de implementación.
Ver notas de implementación.

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: lajaso, AntonioNavajasOjeda
Última actualización por: lajaso,