What You Should Know About CSS Link Pseudo-classes?

CSS Link Pseudo Classes provide a way for you to improve the user experience of your website by styling different states of the HTML links differently.

Until recently, I was only aware of the :hover and :active pseudo-classes... no I am not joking.

Well, there are others and they are amazing to use.

In this post, I will be talking about these CSS link pseudo-classes and looking at how we can use in our code.

:link
:visited
:hover
:active
:focus

But first... What are pseudo-classes?

According to MDN ,

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s)

So when you append a state to a selector and specify how an element should behave in that state, you are using a pseudo-class. For instance,

a:hover {
  color: red;
}

:hover is the pseudo-class appended to the a selector. So when a user hovers over the a tag, its font color will change to red.

Syntax

selector:pseudo-class {
  property: value;
}

There should be no space between the selector and the pseudo-class. It won't work. You can chain together as many pseudo-classes as you want

What CSS link Pseudo-classes do

:link: Selects links that have not been visited.

:visited: Selects links that have not been visited.

:hover: Selects links that have the mouse pointer over them

:active: A state where the user clicks on a link

:focus: When a user focuses on a link after clicking it.

The styles that can be applied to the :visited pseudo-class is limited due to the browser's support for privacy. Sometimes disclosing links a user has visited can be insecure.

Chaining Pseudo-classes

Like most CSS classes, you can also chain link pseudo-classes. You can do this when you want a link in more than one state to behave a certain way.

For instance, you want to change the opacity to .9 of a visited link when a mouse pointer hovers on it.

a:visited:hover {
  opacity: 0.9;
}
// but an unvisited link to 0.7
a:link:hover {
  opacity: 0.7
}

Order of CSS Link Pseudo-classes

If you know a bit of CSS, you probably know about specificity.

CSS specificity is how browsers determine what styles will be applied to an element i.e it determines the most relevant styles.

When two selectors match in specificity, the styles appearing last in the CSS stylesheet are applied.

Consider the following:

a:hover{
  color:red;
}
a:visited{
  color:blue;
}

Maybe you would expect the visited link to change color to red on hover, but that won't happen.

Because visited comes after hover, it will override the hover pseudo-class.

The correct way of writing the above code would be:

a:visited{
  color:blue;
}
a:hover{
  color:red;
}

The order goes from :link, :visited, :hover, :focus to:active

Always use both :focus and :hover to make it more accessible since not all users hover on the links.

That's it! I hope you learned something new!

Stay awesome ;)