La pseudoclase CSS :focus-within

Introducción

Seleccionar un elemento padre ha sido imposible durante mucho tiempo usando solo CSS, sino una pseudoclase,:enfoque-dentro, cambia un poco esa historia. Permite aplicar estilo a un elemento cuando tiene el foco, pero también cuando cualquiera de sus elementos internos (descendientes) tiene el foco. Un buen ejemplo es un formulario en el que desea que un elemento contenedor tenga un estilo determinado cuando el usuario se centra en uno de los elementos de entrada.

Código HTML y CSS

He aquí un ejemplo de uso:enfoque-dentrocon un formulario. Empecemos con este marcado:

form tabindex="0"  h3What's your favorite color?/h3  input type="text"/form

Y nuestras reglas CSS son las siguientes:

.myForm:focus-within {  background: #f8f8f8    repeating-linear-gradient(      45deg,      transparent,      transparent 35px,      rgba(255, 255, 255, 0.5) 35px,      rgba(255, 255, 255, 0.5) 70px    );}.myForm:focus-within::before {  content: "I'm a happy selected form!";  color: rgb(239, 187, 53);}

Demostración funcional

A continuación, puede ver el resultado si está utilizando un navegador compatible. Observe cómo se aplica el fondo diferente al elemento del formulario contenedor cuando el formulario en sí o cualquiera de las entradas están enfocadas.

Si hubiéramos utilizado el viejo y bueno:enfocarpseudo-clase en lugar de :focus-within , nuestro formulario contenedor tendría estilo solo cuando el foco esté en el formulario mismo, pero no cuando las entradas estén enfocadas:

Gracias a Lea Verou por el patrón de fondo CSS.

Conclusión

Para que:enfoque-dentroPara que funcione como se espera, deberá asegurarse de que los elementos internos del contenedor sean enfocables. Los elementos de entrada son enfocables de manera predeterminada, perodivisión,imagenopagLos elementos, por ejemplo, no lo son. El atributo tabindex se puede utilizar para hacer que un elemento sea enfocable. El elemento contenedor también debe ser enfocable para recibir el estilo cuando se enfoca solo desde el contenedor.

Comprobación de compatibilidad del navegador: a partir de 2020, todos los navegadores modernos admiten focus-within, pero consulte ¿Puedo usar? para obtener compatibilidad detallada y específica de la versión del navegador.