CSS Pseudo-classes

August 29th, 2006

The CSS2 definition provides pseudo-classes which are used to add special effects to some selectors:

Pseudo-Class	Definition
:active	Style for an activated element
:focus	Style for an element while the element has focus
:hover	Style for an element when you rest the mouse over it
:link	Style for an unvisited link
:visited	Style for a visited link
:first-child	Style for an activated element
:lang	Style to let the author specify a language to use in a specified element

Note that the :first-child and :lang Pseudo-Classes are not supported by Internet Explorer.

Pseudo-classes Syntax

This is the syntax for Pseudo-classes:

selector:pseudo-class {property: value}

Pseudo-Classes for Anchors(links)

An active, visited, unvisited or hovered link(when you rest your mouse over a link), can all be displayed in differently with a modern CSS-supported browser:

a:link {color: #003366} /* unvisited link */
a:visited {color: #660000} /* visited link */
a:hover {color: green} /* mouse over link */
a:active {color: red} /* selected link */

Note that the order is important! They must be defined in the same order as above, or there might be problems with some browsers.

These anchor Pseudo-Classes by far the most commonly used onces. Usually you use them like in the example above to change the foreground color of links, but they can be used to do much more.
If - for example - you wan’t the background, border, letter-spacing etc…to change you simply define the values for each property.

As an example of what you can do with Pseudo-Classes you might wanna take a look at the CSS Buttons Tutorial / Example.

Entry Filed under: CSS