Pseudo-Classes

A pseudo-class can be added to an element to style it only during certain conditions. Additional CSS rules can be applied to the page so that when an an event is triggered (like clicking on something), the element visually changes for users.

This is the same technology that allows browsers to alter the appearance of links when you hover over them, click them, or after you have visited them.

The pseudo-classes usually attached to links are:

  • :link (default, an unvisited link)
  • :visited (how the link looks after being visited)

Like pseudo-elements, pseudo-classes are appended after a CSS selector.

CSS 
a:link {}
a:visited {}

The web was built with links, for links, on links. They are fundamental to the infrastructure of any site. If you have a large amount of links, it is considered good practice to help visitors track their progress by setting the unvisited and visited style to your links.

NOTE: You can also style links using their element selector (a {}), although it is more generalized than a:link.

Links are ugly, or rather, their default styling - while functional - is not usually aesthetically-pleasing. Browser defaults don’t often mesh with site designs, and most designers will style links to better fit the pallet of the site.

IMPORTANT: A word of caution, however. While default link styling isn’t the most attractive, it is rooted in internet culture and user experience. Styling that is too far removed form the norm can be disorienting and unpopular, as Google found out with its “black link” experiment in 2016.

In the example below, the link should turn to gray after you visit it (it will open in a new tab/window).