Estoy usando huerotate para cambiar los colores de mis enlaces de texto en mi div, el problema es que también se aplica a mis enlaces de imagen. Intenté eliminarlos solo de las imágenes (lo que quiero), pero no puedo resolverlo. ¿Algunas ideas? (Hice un JS para tener un botón para cambiar los colores en mi diseño, y quiero que los enlaces de texto cambien cuando se presiona, pero no que cambien las imágenes).
.scontent { max-width: 100%; margin: 20px 0px; padding: 5px 5px 5px 10px; } .scontent a { color: var(--links); filter: hue-rotate(var(--hue-rotate)); } .scontent a:hover { color: var(--links-hover); filter: hue-rotate(var(--hue-rotate)); } .scontent a img { filter: none !important; }La cuestión es que está aplicando un filtro a a , pero borrando el filtro en img . Este es el caso de :has pseudo-selector, pero actualmente está en borrador, por lo que no existe una solución CSS pura. Debe tomar la ayuda de JavaScript para restablecer el filtro hue-rotate a todos los que tienen img dentro.
let imgArr = document.querySelectorAll('.scontent a img'); [...imgArr].forEach((img)=>{ img.parentNode.style.filter = "hue-rotate(0deg)"; }) :root{ --links: #ff0000; --hue-rotate: 90deg; } .scontent { max-width: 100%; margin: 20px 0px; padding: 5px 5px 5px 10px; } .scontent a { color: var(--links); filter: hue-rotate(var(--hue-rotate)); } .scontent a:hover { color: var(--links-hover); filter: hue-rotate(var(--hue-rotate)); } <div class="scontent"> <a href="#">Text Link </a> <a href="#"><img src="https://picsum.photos/200/200" /> </a> </div>