pseudo classes in css - part 2 (:link)

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

In this part, we'll understand the the pseudo class :link 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 :link selector to style links to unvisited pages.

There is a very high probability that you have seen this: When we google something and click on any of the links that show up, the link changes color and it helps us keep track of the pages we have already visited. Further, the color remains the same until we clear the browser history.

This happens due to the pseudo class :link that the browser by default applies to the results that pop out of our search.

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:link{
            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 red but as soon as we click on the link, it turns into the default color 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 red and as soon as we click on the link the color will change to green and remain green.

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.

PS: Tomorrow is the last day of the GOQii competition and we (me and my father) have to complete 30,000 steps (around 20km) starting at 00:00 hrs IST. hence I have to get going. Bye 👋

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

I write articles related to web development. Follow me here if you are learning the same.

my Twitter handle: @therajatg

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

Have an awesome day ahead 😀!

Rajat's Blog

Rajat's Blog

pseudo classes in css - part 2 (:link)