CSS :hover Pseudo-Class and Other CSS Pseudo-Classes in Detail

CSS :hover Pseudo-Class and Other CSS Pseudo-Classes in Detail
Page content

Introduction

CSS pseudo-classes are frequently used in web development. Some of these classes (for example, the CSS :hover pseudo-class) provide an interaction between the viewer and the website, while some other classes (:active or :visited e.g) are frequently used with hyperlinks. Technically, they are very similar to HTML classes, with the difference being that CSS pseudo-classes are not explicitly specified in the website’s markup.

Brief History

The first version of CSS (CSS1) introduced three pseudo-classes: :link, :visited and :active, but it was possible to apply these classes only to an HTML element. These classes were mutually exclusive. With the arrival of the second version of CSS (CSS2), new pseudo-classes were introduced. These classes were :link and :visited. Furthermore, it was possible to apply these classes to any HTML element. They did remain mutually exclusive, but groups of dynamic pseudo classes were defined as well; :active class joined :hover and :focus classes. CSS3 is not standardized yet, but it seems like it will bring even more advanced pseudo-classes.

Order of Declaration

While declaring pseudo-classes within the CSS style sheet, an order of declaration should be respected. The correct order should look like this: :link, :visited, :hover and :active. In other words, :link and :visited should always come first, while dynamic pseudo-classes should follow right after. The :active pseudo-classes should come last, in order to indicate that a certain link has been activated. This order can be changed, though, if the web developer wants to create some special effects. All these pseudo-classes will be examined in detail in the following paragraphs.

This pseudo-class is used to determine the style of an unvisited link. For example, in order to set the font color of all unvisited HTML links to black, the following piece of code should be used:

a:link {

color: #000000;

}

Furthermore, :link and :visited pseudo-classes are mutually exclusive, since the link can be either visited or unvisited, never both. In other words, a:link:visited selector should never be used.

:visited Pseudo-Class

In contrast with :link, this pseudo-class is used to determine the style of the visited link. In order to set the font color of all visited HTML links to white, the following piece of code should be used:

a:visited {

color: #FFFFFF;

}

Naturally, while talking about the mutual exclusivity of :link and :visited, the same rule applies (since the link can be either visited or unvisited).

:hover Pseudo-class

A “popular” pseudo-class, :hover is activated if the mouse pointer is hovered over the link or some other HTML element where it is applied.

In order to set the font color to black once the user hovers over the HTML link, the following piece of code should be used:

a:hover {

color: #000000;

}

This pseudo-class must come after a:link and a:visited in order to be effective.

:active Pseudo-class

This pseudo-class is used to determine the style of an element that is in the process of being activated. Many CSS beginners try to use this pseudo-class to highlight an active tab (so the visitor knows which page he or she is on), but this is not where it should be used. This pseudo-class activates once the mouse button is pressed and deactivates once the mouse button is released. This can be achieved if the following piece of code is used:

a:active {

color: #000000;

}

This pseudo-class must come after a:hover in order to be effective.