EXTERNAL INFORMATION: PSEUDO-CLASSES AND PSEUDO-ELEMENTS
 

In CSS1, style is normally based on the tags and attributes as found in the HTML source. This works fine for many design scenarios, but it doesn't cover some common design effects designers want to achieve.

Pseudo-classes and pseudo-elements were devised to fill in some of these gaps. Both are mechanisms that extend the expressive power of CSS. In CSS1, using pseudo-class, you can change the style of a document’s links based on whether and when the links have been visited, or based on how the user is interacting with the document. Using pseudo-elements, you can change the style of the first letter and first line of an element, or add elements that were not present in the source document. Neither pseudo-classes nor pseudo-elements exist in HTML, that is, they are visible in the HTML code. Both mechanisms have been designed so that they can be further extended in future version of CSS.

The anchor pseudo-classes

In HTML, there is only one element that can be a hyperlink: the A (anchor) element. In document formats written in XML there can be others. An anchor pseudo-class is a mechanism by which a browser indicates to a user the status of a hyperlink in the document the user is viewing.

A browser typically displays a link in a document in a different color from the rest of the text. Links that a user hasn’t visited will be one color. Links the user has visited will be another color. The four types of anchor pseudo-classes are:

UNR Home Page
  • a:link
  • a:visited
  • a:hover
  • a:active
ASME

There is no way for an author to know whether a user has visited a link; this information is known only to the browser. However, you can set in the style sheet the colors that indicate the status of links. This is done by including an anchor pseudo-class in the selector:

Libraries
 

An example of a link to the University of Nevada, Reno is demonstrated here. Notice that when the mouse hovers over the link, the color changes. This is called a rollover effect. If you click on the link, go to the destination of the hyperlink, then return to this page, the link will be a different color that shows it has been visited.

  Please email me with any comments about this page.