Pseudo Classes & Elements

Pseudo-Classes and Elements

Several pseudo-classes and pseudo-elements exist in CSS. Pseudo-classes refer to dynamically linked groups of class definitions (i.e. all links etc.) while pseudo-elements refer to a sub-section of a larger elements content (i.e. the first line of a paragraph etc.).

The various pseudo-classes are:

A:link
This pseudo-class can be used to set the style definitions for all links in the document (it's the same as using <BODY LINK="...">. Note that this is different to setting a style definition for a single A element, as it only sets style definitions for links. Any anchors in the document (i.e. <A NAME="...">) will not be affected by this pseudo-class. It's used as:

A:link { color:#FF0000}

which would set all the documents links to a bright red colour.

A:active
This pseudo-class can be used to set the style definitions for all active links in the document, the style settings being visible for the moment that the user activates a link (it's the same as using <BODY ALINK="...">. It's used as:

A:active { color:#0000FF}

which would set all the documents links to a bright blue colour when they're activated.

A:visited
This pseudo-class can be used to set the style definitions for all visited links in the document, the style settings being applied for links that navigate to documents that the user has already seen (it's the same as using <BODY VLINK="...">. It's used as:

A:visited { color:#800000}

which would set all the documents links to a dark blue colour after they've been activated.

A:hover
Using the A:hover pseudo-class is essentially the same as using an OnMouseOver/OnMouseOut pair of script event handlers for links in the document. Whatever style settings are applied to the :hover pseudo-class will be applied to links when the users mouse 'hovers' over them, with the links reverting back to any default settings when the users mouse moves away from the link. For example:

A:hover { font-weight : bold }

causes the documents links to bolden when the user passes the mouse over them. Try it with with this link.

Note : As with the above link, it's possible to mix standard class settings with pseudo-classes. The above link boldens when the mouse hovers over it, but none of the other links in the document do. That's because it mixes a class definition, with the :hover pseudo-class. For example:

A.external:hover { font-weight:bold}

So, any links that use the CLASS="external" class descriptor, will bolden upon mouse hovering, but links that use different CLASS="..." descriptors, or none at all, will stay the same font weight as normal (assuming no other style sheet definitions have been applied to the <A> element).

Note : At the time of writing, A:hover was only supported by Internet Explorer 4.0 and above.

The various pseudo-classes are:

:first-letter
The :first-letter pseudo-element (commonly referred to as 'Initial Caps' in typography circles) should apply the defined stylings to the first letter only of the block-level element that it's defined for. For example:

P:first-letter {font-size : 20pt}

would cause the first letter of all <P> element content to be rendered as 20pt. At the time of writing, the :first-letter pseudo-class wasn't supported by any of the major browsers.

:first-line
The :first-line pseudo-element should apply the defined styles to the first line of the block-level element to which it is attached. For example:

BODY:first-line {font-variant : small-caps}

should cause the first line of the document text to be rendered in small capital letters. At the time of writing, the :first-line pseudo-class wasn't supported by any of the major browsers.