:focus-within

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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)

css
/* 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

Error: could not find syntax for this item

Ejemplos

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

HTML

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

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

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

input {
  margin: 4px;
}

Resultado

Especificaciones

Specification
Selectors Level 4
# the-focus-within-pseudo

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también