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.

see: https://stackoverflow.com/questions/43099903/how-can-i-set-different-icons-for-visited-and-unvisited-external-links-with-css — P.J, Jun 21 '22 at 18:06
I am not sure how it applies to my case. There they discuss how to apply styles that are not allowed by browsers for :visited items. In my case, on the other hand, I just need to change the color, which is perfectly allowed by browsers. I tried using a:visited:before and :after, but it didn't work. — user1754501, Jun 21 '22 at 19:25
Apologies, perhaps I misunderstood your question. The approach detailed in the first answer (https://stackoverflow.com/questions/43099903/how-can-i-set-different-icons-for-visited-and-unvisited-external-links-with-css) suggests using an icon font like fontawesome, and placing the icon character inside an with an identical href. That way the icon should correctly gain the ":visited" pseudoclass. If that approach is not working for you, please post more of your code (relevant css and html around the icon). — P.J, Jun 27 '22 at 14:13

Atalay · Answer 1 · 2022-06-21T22:17:54.987

-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.

edited Jun 21 '22 at 22:17

answered Jun 21 '22 at 22:15

Atalay

1
2

They obviously have an href link, they've just substituted their attribute values with `...` as they are not relevant to the question. Were they relevant OP would have added the `HTML` tag to the question. – Zach Jensz Jun 22 '22 at 07:08
href does have a link in the Elements pane of DevTools window, I referred to it as href=”…” . Or do you mean something else? – user1754501 Jun 22 '22 at 14:07

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

1 Answers1