introduction ~ selectors ~ properties ~ advanced ~ real world CSS HTML element | class | ID | contextual | link pseudo class | pseudo element | selector groups | dynamic pseudo class | language pseudo class | child | first child | adjacent | attribute | row & column

link pseudo class selectors

Explanation

The selectors we have seen so far are for pretty general purposes. The two which follow are quite specific. The pseudo class selector lets you select links in a number of different states. Links can be normal (the usual state of an unvisited link), visited, active (while they are being clicked) or in the hover state (with the cursor over them). With pseudo class selectors, you can give a link a different appearance in each of these different states.

Syntax

The selectors for each of the pseudo classes have the following forms

• the selector for normal links is a:link
• the selector for visited links is a:visited
• the selector for hover links is a:hover (note that this is not supported in Netscape Navigator 4.x)
• the selector for active links is a:active

Specificity can create problems for the uninitiated here. Specificity is the style sheets principle which defines what happens when an element is potentially selected and assigned properties by more than one selector. CSS has rules for which selector will take precedence in these situations, as explained in our Specificity section. Generally (and logically) things like class selectors will always be more specific than HTML selectors, and so their properties will override any properties defined by an HTML element selector. Unfortunately link pseudo class selectors are not any more specific than HTML element selectors, nor is any one of the link pseudo class selectors more specific than the others. When selectors all have an equal specificity the selector which occurs latest in the style sheet prevails. Basically what this means is that if you don't put your link pseudo class selectors in the same order in your style sheet as they are written above they won't do what you were expecting them to do. And if for whatever reason you have a simple HTML element selector <a> as well, make sure you put it above all of the link pseudo element selectors.

Use

With this type of selector, you can make links appear differently in different states. While this is possible with the traditional BODY tag in HTML, that only allows you to specify a color for links in these different states. With the pseudo class selector, any property which you can assign to an element can be assigned to a link in any state. You might change the background color, or the font, or both, while a link has the mouse over it, for instance.

You can use these in conjunction with class selectors to create different types of link for different purposes. For example, you might create a class of onsite, and a class of offsite links. You can then use the class selector in conjunction with the pseudo-class selector to make the different types of link appear differently in various states.

For example,

Browser support

Detailed browser support information for this feature can be found in the Westciv CSS Guide, or in our CSS Browser Support Table.

next: pseudo element selectors

(C)1997-2001 Western Civilisation Pty. Ltd.