Understanding the Key Aspects of Using Link Pseudo Class in CSS

As a designer, we often get mystified by the animations created using CSS and overlook the selectors that are added in the specifications. Well, if you want to style your content dynamically, then it is imperative for you to familiarize yourself with the pseudo class selectors.

Pseudo classes have been around us since the inception of CSS1. However, many new pseudo selectors are included in the latest CSS3 version. But the agenda of this post is not discussing the list of newly added pseudo classes, but rather we intend to focus on using the link pseudo class in CSS efficiently. But, before that let us first understand what do we mean by pseudo class.

An Overview of Pseudo Classes

A pseudo-class is just like a class in an HTML markup; the only difference is that such a class isn’t specified within the markup explicitly. Most importantly, many pseudo-classes are dynamic – based on how a user interacts with the document.

Every pseudo-class begins with a colon (:), and no whitespace appears between and the selectors or appears after the colon. Let’s view the basic syntax of a pseudo class:

You can also use a CSS class along with a pseudo-classes as follows:

How Link Pseudo Classes Can Be Used in CSS?

Link pseudo-classes render web designers the ability to add a different style to multiple states of HTML links. Here’s an example that demonstrates how link pseudo-classes enables you to style hyperlinks based on user interaction:

While there are several type of pseudo-class selectors over the web, some of the most important selectors are:

1. :link – It help in selecting all the unvisited links.

2. :visited – It determines all the links that are visited by users.

3. :hover – This state happens when a user places the cursor of the mouse over a link.

4. :active – This state occurs when a link is being clicked by some user. In short, it depicts the brief moment between when a link is clicked and becomes focused. To be more precise, this state can be observed when you press a link using the
mouse button without releasing that button.

5. :focus – It is the state that happens when any user focuses on a particular link. It can occur when a link is tabbed, or when it is being clicked. All of the pseudo-classes mentioned as above are used for links. However, the

Link pseudo-classes are “:link” and “:visited” – that are designed in particular for HTML link (<a>) elements. While the others are called dynamic pseudo-classes.

Now for using the Link pseudo-classes in CSS in the most efficient manner, you need to understand the following key concepts:

  • Combining the Link Pseudo-classes
  • Order of Link Pseudo-classes
  • Using Link Pseudo-classes in a case-sensitive manner and so on.

a) Combining the Link Pseudo-classes

Using a combination of the Link pseudo-classes helps in greater CSS specificity. Let’s say, for example, you may want to change the appearance of the visited and unvisited links when a user hovers over it.

In this code snippet, the anchor text of the visited link will become yellow when a user hovers over an unvisited link. But in case, a user hovers on a visited link, and then the anchor text will change to red color.

b) Order of Link Pseudo-classes:

CSS specificity often tends to make some of the links match many different pseudo-classes at the same time. And so, it becomes crucial to order the style rules used in the stylesheets. Usually, when two pseudo-classes match simultaneously is when a link is being clicked on by users. Next, when a link is clicked the further two states that the link will match are :hover and :active. Now, it’s a known fact that when two selectors have equal specificity, then the selector further down the CSS file wins by default.

So the order of the pseudo-classes will be something like:

c) Casing style:

W3C allows writing pseudo-classes specifications in any type of casing style – be it in all-caps, all-lowercase, etc. But, the best practice requires writing the names of the pseudo-class in all-lowercase. However, the following :link pseudo-class variations will work in the same way, as they’re equivalent to each other:

d) Adding Space to Characters Before and After Pseudo-class Names:

As discussed previously, no space can be added before and/or after the colon (:) – that is before the pseudo-class name because they won’t work.

Example:

e) Link Pseudo-classes in Modern Browsers:

Both the :link and :visited Link pseudo-classes will act in a different manner in modern browsers, so as to safeguard the privacy of a user’s browsing history. Also, modern browsers restrict rendering the CSS properties based on style rules – that involve the Link pseudo-classes. This means you cannot style ‘:link’ and ‘:visited’ links by adding background-image or other values, except for changing their color properties. When a web design is executed In modern browsers, the example below won’t behave as per your expectations. Visited links won’t be rendered in all-caps, and instead, they’ll be rendered in all-lowercase similar to unvisited links.

HTML:

CSS:

outcome

Conclusion:

The purpose of this post is only to help you understand the basics of Link pseudo-classes. Also, you’ll get to know several important aspects that are crucial for using the Link pseudo-classes properly in stylesheet.

 

About ella-cooper

ella-cooper
Ella Cooper works in a leading web development company as a programmer. Apart from programming she has a penchant for writing and thus she shares her development experience through blogging.

Related posts:

One thought on “Understanding the Key Aspects of Using Link Pseudo Class in CSS

Comments are closed.