SCSS making visited link not clickable not working [duplicate] - css

Question

This question already has answers here:
Why doesn't this a:visited css style work?
(6 answers)
Why are certain CSS properties not applied to a:visited? [duplicate]
(1 answer)
Why did browsers limit :visited selector?
(1 answer)
Closed 12 months ago.
I want it such that an a element that is visited and of the class, myclass is lightgreen and not clickable. I am able to make it lightgreen, but it is still clickable.
My code:
a:visited.upvote {
pointer-events: none;
cursor: default;
color: lightgreen;
}
and when that code is applied to all a elements, regardless of class and visited status (a {...}), the link is disabled as it should be.

Answer 1

The pointer-events property can't be applied to the :visited CSS pseudo-class due to:
Privacy restrictions
Because of privacy reasons, browsers strictly limit which
styles you can apply using this pseudo-class, and how they can be
used:
Allowable CSS properties are color, background-color, border-color, border-bottom-color, border-left-color,
border-right-color, border-top-color, column-rule-color,
outline-color, text-decoration-color, and
text-emphasis-color.
More info here.
A workaround would be adding a click event listener to the tags and then add to it a class that would apply the pointer-events: none; like so:
const unclickable = document.getElementById("unclickable")
unclickable.addEventListener("click", makeitso)
function makeitso() {
unclickable.className = "notSoClickableLink"
}
div{
display: flex;
flex-direction: column;
gap: 1rem;
}
.notSoClickableLink{
pointer-events: none;
color: lightgrey;
}
<div>
The first Link
<a id="unclickable" href="#2">Make this a visited Link</a>
</div>
This solution would not track your link tag's state, to circumvent that you can try referring to this post: How can I detect visited and unvisited links on a page?