When working with CSS, I encountered an issue while trying to apply a pseudo element on hover and active states of anchor tags. Unfortunately, my code was not producing the desired outcome.
a:not(a[name="nobgcolor"]):hover{color:#ffff35;background-color:#ff3355;}
a:not(a[name="nobgcolor"]):active{color:#ffff35;background-color:red;}
My intention was to have background color appear on hover and active links, except for those with the property name="nobgcolor". Initially, I tried applying this to the top link (To go to Top) but it did not work as expected. That's when I introduced name="nobgcolor" and attempted again!
a:hover:not(a[href*="#top"]){color:#ffff35;background-color:#ff3355;}
a:active:not(a[href*="#top"]){color:#ffff35;background-color:red;}
However, the codes were still ineffective, affecting the entire page and removing the background color. Can someone provide guidance on how to resolve this situation?