I am using huerotate to change colors of my text links in my div, the problem is, it is also applying to my image links. I have tried removing them from images only(what I want) but I just can't figure it out. Any ideas? (I have made a JS to have a button to change colors on my design, and I want the text links to change when it is pressed, but not have the images change.)
.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;
}
The thing is, you are applying filter to a, but clearing the filter on img. This is the case for :has pseudo-selector, but its currently in draft, so there is no Pure CSS Solution. You need to take help of JavaScript, to reset the hue-rotate filter on all a that has img inside it.
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>