Links and Pseudo-Classes

Previous Page
Table of Contents
Next Page

Links and Pseudo-Classes

You have already learned how to style <a> or link elements in Lesson 3, "Selectors in Action." Now you will learn how to style the five different link states.

Links can be in the following states:

  • Normal The standard unvisited link state

  • Visited The link points to a URI that has already been visited

  • Hover The cursor is over the active area of the link

  • Active The moment the link is selected or clicked

  • Focus The link is in focus and ready to accept input, such as a click or mouse down

Some link states cannot occur at the same time. For example, a link can either be visited or unvisitedit cannot be both. However, visited and unvisited links can also be in the hover, active, and focus states.

Each of these states can be styled individually using link pseudo-classes (classes that do not exist in the document structure). The five link pseudo-classes are

  • a:link Styles unvisited link elements

  • a:visited Styles visited link elements

  • a:focus Styles the state during focus

  • a:hover Styles the state when the cursor moves over a link

  • a:active Styles the state when a link is activated

The five pseudo-classes are shown in Listing 10.1.

Listing 10.1. CSS Code Containing the Five Link Pseudo-Classes
a:link {...}
a:visited {...}
a:focus {...}
a:hover {...}
a:active {...}

Focus and Active States

The a:focus pseudo-class highlights the tab position for people who use a keyboard to navigate.

Unfortunately, Internet Explorer for Windows does not support the a:focus pseudo-class. Instead, it uses the a:active pseudo-class for tab highlighting.

As an additional problem, Internet Explorer for Windows incorrectly applies the a:active pseudo-class. The a:active state remains visible until another action takes place.

Previous Page
Table of Contents
Next Page
© 2000- NIV