: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 enero de 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 itemEjemplos
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
Loading…