Member Avatar for Violet_82

HI all, I have a question about changing the colour of visited link with a:visited{}: it doestn' seem to work the way I thought it would, or, more likely I am doing something wrong.
I have this situation:

.box1 a:link{
    color:#ac2973;
    text-decoration:none;
}
.box1 a:visited{
    color:#6bb8c0;
}
.box1 a:hover{
    color:black;
}

But I have more than 1 link in the div. Now, when I click on one of the link, all of them - even those on other divs - change the colour to be #6bb8c0 even if I haven't visited them. Is this normal?
thanks

  • 3 Contributors
  • 5 Replies
  • 240 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by pritaeas

Dani AI

Generated

Good catch by and — the browser decides a link is "visited" by comparing the link target with the user’s history. A few extra gotchas and quick fixes that often help when :visited behaves unexpectedly.

Browsers intentionally limit what :visited can change for privacy reasons: you can reliably change color-related properties (color, background-color, border-color, outline-color, text-decoration-color, and SVG fill/stroke) but not layout, images, or alpha/transparency. The user-agent also prevents scripts from reliably reading a link's visited state (getComputedStyle will report the non-visited value). (developer.mozilla.org)

Order and specificity matter: put your :visited rules after :link but before :hover/:active (LVHA) and watch for higher-specificity selectors or !important rules that may override :visited. If a :hover rule appears later or has equal specificity, it can hide your visited color. (developer.mozilla.org)

If the page is single-page (hash fragments, JS routing) or you use placeholders like href="#" the browser may not treat each click as a distinct visited URL. For UI that should show a "clicked" state regardless of browser history, add a class on click and style that class. Example (very small):

document.querySelectorAll('.box1 a').forEach(a => {
  a.addEventListener('click', () => a.classList.add('visited'));
});
.box1 a.visited { color: #6bb8c0; }

If you want persistence across loads, store the href in localStorage/sessionStorage and reapply the class on page load.

Debugging tips: test with real (distinct) URLs or in a fresh profile to rule out history effects, inspect the rendered color in DevTools (visual), and remember that running JS to read computed styles won't reliably tell you whether a link is visited. (developer.mozilla.org)

These points should help beyond the URL-equality issue already noted in the thread.

Recommended Answers

All 5 Replies

Member Avatar for pritaeas

Do those links point to the same page?

Member Avatar for Violet_82

ah! yes they do, the html is actually the same for all the links at the moment in that it points to #:
...<a href="#" class...
Didn't occur to me that could be the cause. So once I insert the right url it will work correct?
thanks

Member Avatar for JorgeM

Once you insert the correct URLs, they color will change once the visitor has visted each particular link from the browser's perspective. Of course, if the user clears their history, the links would have the a:link style applied once again.

Member Avatar for Violet_82

ah ok thanks guys. Is that because the target is the same and once a link is clicked effectively the target site become "visited" for all the links? Just trying to find an explanation
thanks

Member Avatar for pritaeas

Is that because the target is the same and once a link is clicked effectively the target site become "visited" for all the links?

Correct.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.