SCSS making visited link not clickable not working

Question

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.

Your HTML indicates that the target element does not have the `upvote` class, so the CSS will not apply to it. — Obsidian Age, Feb 28 '22 at 02:43
@ObsidianAge oops, meant to indicate 'upvote' in the question — asd_asd_asd_guy, Feb 28 '22 at 03:10

Yong · Answer 1 · 2022-02-28T04:19:49.900

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>
  <a href="#">The first Link</a>
  <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?

SCSS making visited link not clickable not working

1 Answers1

Privacy restrictions