Demo Github
Cuando trabajas en un proyecto, hay ciertas necesidades o funcionalidades que necesitas crear, a veces solemos crear todo manualmente, pero en ocasiones encontramos que ya existen funcionalidades prefabricadas, una de estas es la pseudo-clase :focus-within de CSS y en este Post te voy a enseñar como funciona y otros detalles.
Antes de continuar con este Post te invito a tomar el curso CSS 3 desde 0 completamente Gratis, en donde aprenderás en detalle a usar las propiedades, módulos, etc. de CSS 3 que te permitirán darle un mejor diseño y diferentes características visuales a una Página HTML 5:
Bien continuemos con el Post: Como funciona la Pseudo-Clase :focus-within de CSS.
La pseudo-clase :focus-within representa un elemento que esta emparejado con la pseudo-clase :focus o que tiene un descendiente que coincide con la pseudo-clase :focus.
En términos sencillos por ejemplo, cuando se hace clic, toca o tabula un elemento como la caja de texto de un formulario, el formulario se pinta de un color determinado, el cual lo podemos especificar en el código CSS.
Primero veamos como funciona la pseudo-clase :focus y luego como funciona la pseudo-clase :focus-within para no confundirnos.
¿ Como funciona la pseudo-clase :focus ?
La pseudo-clase :focus funciona de manera diferente, un elemento recibe el foco cuando la pseudo-clase :focus es aplicada al elemento, pero en el caso de que tenga una colección de elementos secundarios, no es común usar la pseudo-clase :focus para seleccionar el elemento padre. La pseudo-clase :focus se aplica solo al elemento enfocado.
Por ejemplo si tengo un formulario HTML con 3 campos o cajas de texto que son: nombre, precio y stock. A estos 3 campos les aplico la pseudo-clase :focus
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#nombre:focus { background: blue; } #precio:focus { background: orange; } #stock:focus { background: green; } |
Y si coloco el cursor en la caja de texto del campo stock, este se pintara de color verde (green)
La pseudo-clase :focus solo se aplica al elemento que es enfocado, pero podemos usar la pseudo-clase :focus-within si queremos seleccionar un elemento que contenga un elemento enfocado o varios elementos que tengan descendientes coincidentes con la pseudo-clase :focus
¿ Como funciona la pseudo-clase :focus-whithin ?
La pseudo-clase :focus-within nos sirve para diferentes casos de uso:
- Para resaltar un formulario completo cuando uno de sus campos es enfocado o se coloca el cursor en uno de sus campos.
- Para resaltar las filas de una tabla y hacer que cambie el color de fondo cuando usuario hace clic en la tabla.
Por ejemplo si tengo un formulario HTML similar al anterior ejemplo con 3 campos o cajas de texto que son: nombre, precio y stock. A mi formulario o elemento form le aplico la pseudo-clase :focus-within
|
1 2 3 4 5 6 |
form:focus-within { background: pink; outline: 3px solid #333; } |
Y si hago clic o coloco el curso en alguna parte o en una caja de texto del formulario el fondo del formulario se pintara de color rosado (pink) con unas lineas fuera del borde del formulario que aplique con la propiedad outline.
En la imagen anterior, hago clic sobre el campo o caja de texto precio y el fondo del formulario se pinta de color rosado (pink)
Compatibilidad de la pseudo-clase :focus-whithin
A partir del año 2020 la pseudo-clase :focus-within de CSS es ampliamente compatible con la mayoría de navegadores, excepto Internet Explorer, a continuación puedes ver una tabla con las versiones de navegadores que son compatibles con la pseudo-clase :focus-within
Conclusión
La Pseudo-Clase :focus-within de CSS es de gran ayuda para los Desarrolladores y usuarios Web, siempre debemos tomarla en cuenta al trabajar con CSS, es mucho mejor que usar JavaScript para dar el efecto de enfoque interno, usar JavaScript para hacer el efecto de enfoque interno sería carga extra para el sitio web.
Nota(s)
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.