How to change the style of already visited links with CSS (visited)

In this article, we will learn how to change the style of already visited links, with the help of CSS and pseudo-classes, simply and quickly.

Theory of styling already visited links with CSS

We know that the <a> tag is used to represent links in an HTML document.

However, when the link has already been visited, it usually has a different style than what we chose before that.

It’s usually a dark purple, which doesn’t go well with the layouts, see:

Before proceeding, this was the HTML used in the example:

<a href="https://www.google.com">Google Link</a>

Practice changing the style of already visited links with CSS

So we have this unwanted style and the ideal color for visited links from our project is orange, for example.
So with the :visited pseudo-class, we were able to make this change, see:

a:visited {
     color: orange;
}

And this is the result:

And this result was achieved with a native resource, that is, a very simple and performative way of styling visited links.

Serves as the addendum for pseudo-classes, in case you didn’t know, they can be a big hand in the wheel.

Change styles of some elements that don’t necessarily appear in the DOM or their state.

As is the case with :hover, which changes elements when the mouse pointer is over it

You can find a complete list here. 🙂

Note: Mastering or at least knowing the pseudo-classes is a feature that good developers have, they know the tools they are working on!

Conclusion

In this article we saw that to style an already visited link you only need to apply the pseudo-class :visited in the <a> tag

So we can apply any style you want with CSS, in a very simple and effective way.

And that’s it for today, until the next post!

Want to learn more about CSS? Click here!