pseudo classes in CSS – part 4 (:active)

This content originally appeared on DEV Community and was authored by Rajat Gupta

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: LVHA order - yet to be written.

** 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 😀!

This content originally appeared on DEV Community and was authored by Rajat Gupta

Print Share Comment Cite Upload Translate Updates

APA

Rajat Gupta | Sciencx (2022-02-12T06:31:37+00:00) pseudo classes in CSS – part 4 (:active). Retrieved from https://www.scien.cx/2022/02/12/pseudo-classes-in-css-part-4-active/

MLA

" » pseudo classes in CSS – part 4 (:active)." Rajat Gupta | Sciencx - Saturday February 12, 2022, https://www.scien.cx/2022/02/12/pseudo-classes-in-css-part-4-active/

HARVARD

Rajat Gupta | Sciencx Saturday February 12, 2022 » pseudo classes in CSS – part 4 (:active)., viewed ,<https://www.scien.cx/2022/02/12/pseudo-classes-in-css-part-4-active/>

VANCOUVER

Rajat Gupta | Sciencx - » pseudo classes in CSS – part 4 (:active). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/02/12/pseudo-classes-in-css-part-4-active/

CHICAGO

" » pseudo classes in CSS – part 4 (:active)." Rajat Gupta | Sciencx - Accessed . https://www.scien.cx/2022/02/12/pseudo-classes-in-css-part-4-active/

IEEE

" » pseudo classes in CSS – part 4 (:active)." Rajat Gupta | Sciencx [Online]. Available: https://www.scien.cx/2022/02/12/pseudo-classes-in-css-part-4-active/. [Accessed: ]

rf:citation

» pseudo classes in CSS – part 4 (:active) | Rajat Gupta | Sciencx | https://www.scien.cx/2022/02/12/pseudo-classes-in-css-part-4-active/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts