Change color of an icon on a site, when that icon's underlying link becomes :visited

Question

There are many identical icons on a site, each with a different underlying link. To change stuff I use Stylish app in the Chrome browser. In Stylish I have

a:visited {color:grey;}

which works great on normal (alphanumeric) links, but it doesn’t change the color of visited icons (why oh why?!). I have determined the class that controls the color of the icons:

[data-ma-theme=blue-grey] .playlist__actions:not(.track_page) a

But no matter what I tried to do with the combination of this class and :visited, I failed. I put :visited before and after the class name, added and removed “a”, unticked other items in DevTools’ Styles pane that I thought might override my setting, it just won’t work.

At the same time it changes color just fine when I add :hover, so why wouldn’t it work with :visited??

If this of any help, in Chrome’s DevTools in the Elements pane this is what I have for the icon in question and its underlying link:

<a target=”…” itemprop=”…” href=”…” class=” ___adv-binded ___adv-sape …” id=”…” title=”…”>
== $0
<span>
<i class=”zdmi…” style>…</i>

I tried using .___adv-binded and .zdmi classes with :visited, but it doesn’t work either.

Answer 1

I guess it is not working because of you do not have href link. If there is no href link this mean you did not visited before.

<nav>
<li><a href="https://www.google.co.in/">Visit Link</a> </li>
</nav>

please try with link, good luck.