El :focus-withinpseudo selector en CSS es un poco inusual, aunque bien nombrado y bastante intuitivo. Selecciona un elemento si ese elemento contiene algún hijo que tenga :focus.
form:focus-within ( background: lightyellow; )Que funciona así ...
Dije "inusual" porque no es común en CSS poder seleccionar un elemento principal en función de la existencia o el estado de los elementos secundarios. ¡Seguro que es útil!
Aquí hay un formulario de ejemplo para probarlo:
Vea el Formulario de respuesta simple de Pen con: focus-within de Chris Coyier (@chriscoyier) en CodePen.
Tenga en cuenta que el ejemplo se usa :focus-withinen todo el formulario y en el envoltorio de entrada interior
Cualquier forma en que un elemento hijo pueda enfocarse activará: enfoque dentro. Por ejemplo, si un elemento tiene un atributo tab-indexo contenteditable, entonces es un elemento enfocable y funcionará. Tampoco importa cómo se enfocó el elemento. Se podría hacer clic o tocar, podría haber sido fichado o navegado por algún otro medio, o incluso enfocado a través de JavaScript, como ...
document.querySelector("input").focus();Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 60 | 52 | No | 79 | 10.1 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | 10,3 |