pseudo classes in CSS - part 3 (:visited)

Note: This is the third part of the series dedicated to the pseudo classes of CSS.

In this part, we'll understand the the pseudo class :visited but if you want to jump to any other pseudo class, be my guest and click on the links provided below:

part 1: pesudo class :hover

part 2: pseudo class :link

part 3: pseudo class :visited

part 4: pseudo class :active

part 5: pseudo class :target

Use the :visited selector to style links to visited pages.

If you have read about the :link selector above, understand that the :visited is exactly opposite of it. let me tell you how:

The :visited selector is used to style links to visited pages as compared to the :link selector which is used to style links to unvisited pages.

We saw in the :link selector that initially the text's color is defined in the :link selector and the color changes to default only after it is clicked.

However, in :visited the text will initially have the default color and only when we click on it, the color will change to the one defined in the :visited selector.

Talk is cheap, let me show you the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:visited{
            color: red;;
        }
    </style>
</head>
<body>
    <a href="#"><h1>This is a link.</h1></a>
</body>
</html>

👆 As you can see above the link's original color is lost as soon as we click on it and it turns red and will remain as such until we clear the browser history.

Let us see another example:

    <style>
        a{
            color: green;
        }
        a:link{
            color: red;
        }
    </style>

Here the link's original color is green and as soon as we click on it, the color will change to red and remain red.

Here's a quick summary:

Use the :hover selector to style links when you hover over them. It can be used on elements other than links.
Use the :link selector to style links to unvisited pages.
Use the :visited selector to style links to visited pages.
The :active selector is used to style the active links. It can be used on elements other than links.

LVHA: If you are using one or more of these selectors in a single page then use the link selector first then the visited selector then hover and finally active at the end.

That's all folks.

If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.

I write one article every day related to web development (yes, every single day). Follow me here if you are learning the same..

my Twitter handle: @therajatg

If you are the Linkedin type, let's connect: https://www.linkedin.com/in/therajatg/

Have an awesome day ahead 😀!

Blog

pseudo classes in CSS - part 3 (:visited)

Rajat Gupta

Join Our Newsletter. No Spam, Only the good stuff.

Related