I want it such that an a element that is visited and of the class, myclass is light green and not clickable. I am able to make it light green, 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.

CodePudding user response：

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?

CodePudding user response：

EDITED (IGNORE THE ORIGINAL COMMENT)

According to this MDN page, :visited pseudo-class might only be used as a visual style purposes. According to the article linked above,

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

Perhaps you'd need to rely on JavaScript to achieve what you aim at.

IGNORE THIS ORIGINAL ANSWER:

When chaining multiple CSS selectors, pseudo selectors like :visited or :hover cannot precede the ID/CLASS selectors.

In short, it needs to be a.upvote:visited rather than a:visited.upvote.