los :focus-within CSS pseudo-clase representa un elemento que ha recibido foco o contiene un elemento que ha recibido atención. En otras palabras, representa un elemento que a su vez coincide con el :focus pseudo-clase o tiene un descendiente que coincide con :focus. (Esto incluye descendientes en árboles de sombra.)

/* Selects a <div> when one of its descendants is focused */
div:focus-within {
  background: cyan;
}

Este selector es útil, para tomar un ejemplo común, para resaltar un <form> contenedor cuando el usuario se centra en uno de sus <input> los campos.

Sintaxis

:focus-within

Ejemplos de

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

HTML

<p>Try typing into this form.</p>

<form>
  <label for="given_name">Given Name:</label>
  <input id="given_name" type="text">
  <br>
  <label for="family_name">Family Name:</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
Selectores Nivel 4
La definición de ‘: focus-inside’ en esa especificación.		 Borrador de trabajo Definición inicial.

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
:focus-within 60 79 52 No 47 10.1 60 60 52 44 10,3 8.0

Ver también