how-to #4: use the css pseudoselectors

Everyone will have seen the effect where passing the mouse over a text link - not a graphic - causes the links to change colour, underlining, font weight, or even font family. Although this can be overdone, it's quite effective - but how do you do it?

adding styles to link tags

Using a style sheet, you can set this up very easily. The object is to modify the <A> anchor which denotes a hyperlink, and you set up a style like this:

A {font-size: 10 pt; font-family: sans-serif; font-weight: bold; color: #0000ff;}

This style should go in the <HEAD> section of the page, inside a <STYLE> tag, or of course in an external style sheet. The above style sets all your links to be in 10 point bold, blue, sans-serif text.

But what if you want some links to look different to others? For example, links in a navigation bar at the bottom of the page might need to be in a smaller font or different colour. No problem. Just add a CSS class selector and use the new style in the link tag, so:

.demo {font-size: 8 pt; font-family: serif; font-weight: bold; color: #00aa00;}

Your style sheet now contains two styles, one for <A> tags without a style and one for <A> tags with the class 'demo'. In the HTML code, use the style like this:

<A HREF="" CLASS="demo"></A>

Now all your links will have the style attached to the <A> tag except those where you specify the "demo" class.

CSS 'pseudoselectors'

So, those pseudoselectors. There are four of these, namely "link", "active", "visited" and "hover". "Link" refers to the link before it is clicked, visited, or hovered over with the mouse and corresponds to the basic <A> tag. "Active" is the link which has just been clicked on before the browser navigates to the page. "Visited" is fairly obvious. "Hover" is the fun one. This is the link's appearance when the mouse hovers over the link before it is clicked; when the mouse is moved away, the link will revert to the "link" or "visited" style, depending on whether that link has been visited before.

To apply these pseudoselectors, put a colon and then the pseudoselector name after the anchor or, if you've used a class, after the class name. The code to insert into a web page is as follows (normally, you'd put this into a style sheet):

<style type="text/css">
a.standard:link {color: green; text-decoration:none; background:white;}
a.standard:hover {color:red; text-decoration:underline; background:white;}
a.demo:link {color:purple; font-size:12px; font-family:serif; text-decoration:none; background:white;}
a.demo:hover {color:cyan; text-decoration:underline; font-size:14px; font-family:sans-serif; font-weight:bold; background:white}

(The "active" and "visited" links have been omitted for clarity.) You can see that this will make the standard links on the page plain green text to underlined red text when hovered over, while the link with class "demo" will change from purple 12 pixel high serif text to bold underlined cyan 14 pixel sans-serif bold text (ouch!) when hovered over. Just to prove this:

This is a standard link

This is a link using class "demo"

the catch

As always, there's a catch, which can have you tearing your hair out, and it's this.

Under certain circumstances - it doesn't appear to be a consistent error - the "hover" and "active" pseudoselectors don't work properly. What happens is that the link works fine, but you don't see the change which is meant to occur on hovering over the link, or possibly no change when the link is active. This appears to happen if you define your styles so that the "visited" pseudoselector comes after the "hover" or "active" pseudoselectors in the style sheet. It doesn't always happen, but if your classes don't work as expected, make sure that "active" and "hover" come after "visited", and that may fix the problem.