pseudo classes in CSS - part 4 (:active)

Note: This is the 4th part of the 5 part series dedicated to the pseudo classes of CSS.

In this part, we'll understand the the pseudo class :active 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

** The :active selector is used to style the active link.**

The difference between :link, :visited and :active is very subtle. Therefore, I urge to open your code editor and start playing with these.

We can better understand the :active selector via an example:

<!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:active{
            color: red;
        }
    </style>
</head>
<body>
    <h1><a href="#">I am a link.</a></h1>
</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. However, when we release the mouse pointer, the red color is lost.

Note: The active selector can be used on all elements and not just links.

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 4 (:active)

Rajat Gupta

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

Related