: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 (en-US))
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