Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
February 12, 2022 06:31 am GMT

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: 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>

Image description
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:

  1. Use the :hover selector to style links when you hover over them. It can be used on elements other than links.
  2. Use the :link selector to style links to unvisited pages.
  3. Use the :visited selector to style links to visited pages.
  4. 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 !


Original Link: https://dev.to/therajatg/pseudo-classes-in-css-part-4-active-2m1e

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To