Tuve que resolver un reto de CSS que puede parecer sencillo pero tiene truco: hay una lista de enlaces y quiero aplicar un estilo cuando un enlace está en estado hover o focus. Si ninguno está hover o focus, quiero que el primero de la lista tenga ese estilo por defecto.
El marcado HTML básico se puede representar así como texto: <ul><li><a href=#>One</a></li><li><a href=#>Two</a></li><li><a href=#>Three</a></li><li><a href=#>Four</a></li><li><a href=#>Five</a></li><li><a href=#>Six</a></li></ul>
Estilado para hover y focus: li a:hover, li a:focus { background-color: pink; }
La parte complicada es aplicar el estilo al primer elemento solo cuando no hay ningún enlace en hover o focus. Una solución moderna de solo CSS aprovecha el pseudo selector :has junto con :not para detectar si la lista contiene un enlace en hover o focus. Por ejemplo: ul:not(:has(li a:hover)):not(:has(li a:focus)) li:first-of-type a { background-color: pink; } Esto significa que el primer enlace se pinta de rosa únicamente cuando la lista no tiene ningún enlace en hover o focus.
Ventaja de esta aproximacion es que evitamos tener que anular estilos de los hermanos cuando uno recibe hover o focus. Inconveniente: :has no esta soportado en todos los navegadores antiguos, por lo que si necesitas compatibilidad amplia puedes implementar una pequena alternativa con JavaScript que añada o quite una clase en el contenedor segun los eventos mouseenter, mouseleave, focus y blur.
Ejemplo final de codigo como texto: <!-- HTML --> <ul><li><a href=#>One</a></li><li><a href=#>Two</a></li></ul> <!-- CSS --> li a:hover, li a:focus { background-color: pink; } ul:not(:has(li a:hover)):not(:has(li a:focus)) li:first-of-type a { background-color: pink; }
En Q2BSTUDIO combinamos buenas practicas de front-end como esta con desarrollo de backend y soluciones completas a medida. Somos una empresa de desarrollo de software y aplicaciones a medida con experiencia en inteligencia artificial, ciberseguridad, servicios cloud aws y azure y soluciones de inteligencia de negocio. Si necesitas una aplicacion diseñada especificamente para tu empresa visita nuestra pagina de aplicaciones a medida y software a medida o conoce nuestras propuestas en inteligencia artificial e IA para empresas para integrar agentes IA, automatizaciones y analitica avanzada con Power BI.
Palabras clave incluidas para mejorar posicionamiento: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi.