complete css guide

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 link 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, hover (when the cursor is over them) or active (while they are being clicked). It's worth noting now that some of these states are mutually exclusive: a given link cannot be simultaneously visited and unvisited. But others are not: while a link is active, it will also be either visited or unvisited.

With pseudo class selectors, you can give a link a different appearance in each of the four 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 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 type selectors, and so their properties will override any properties defined by a type selector. Unfortunately link pseudo class selectors are not any more specific than type selectors, nor is any one of the link pseudo class selectors more specific than the others. Bearing in mind what we mentioned above about some of the link states not being mutually exclusive, eg a given link can be both in the hover state and also visited, you can see how the situation can occur here when two equally specific style sheet rules will conflict with one another. What happens then?

When selectors all have an equal specificity the selector which occurs further from the top of the style sheet prevails. 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 type selector a as well, make sure you put it above all of the link pseudo element selectors.

To be absolutely clear about this, link and link pseudo class selectors should always appear in your style sheet in the following order. If your hover and active states don't appear to be working, make sure you check this out.

Use

With this type of selector, you can make links appear differently in different states. 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 combination with the link pseudo-class selector to make the different types of link appear differently when they are in various states.

For example,

© 1997- western civilisation pty. ltd. Contact Us Search Site