html, css, jQuery, PHP, mySQL

« | »

CSS From Scratch. 8:1 Pseudoclasses


pseudoclasses allow extra behaviours

The commonest use of pseudoclasses is to add styles for different states of an anchor (link) element. This includes the hover state – when the mouse hovers over an element, the style changes. Internet Explorer only recognises hover on an anchor tag, but other browsers may allow hover states on any other elements.

The basic syntax of a pseudoclass is:

element:pseudoclass {property: value}


a:hover {color: red;}

The pseudoclasses that may be used on anchor tags reflect the different possible states of that tag – the default behaviour of the browser is to use different colours for links, visited links and active links. Pseudoclasses also add the possibility of changing styles when the mouse hovers over the link (mouseover in javascript) and on keyboard focus for those using tabbed navigation.






Although the focus pseudoclass is optional, it is important to remember that when using the above pseudoclasses the first four must always be listed, even if they are left unstyled. They must also be listed in the above order, which can be remembered using the mnemonic LoVe HAte (link, viewed, hover, active). Focus may also be used to style form elements, which can be tabbed through by those using keyboard navigation or assistive devices. This makes it a useful addition for acessability.

Additional pseudoclasses.

There are many other pseudoclasses, and more have been added in CSS3; however, browser support for pseudoclasses is still not complete.  Be careful when using these new selectors.

Older and more reliable pseudoclasses from CSS2.1 include:

Selects the first letter in a block of text for styling.

Selects the first line in a block of text for styling.

Use with the property content to add content either before or after the named element.

Example: p:before {content: url(‘smiley.gif’);}

Selects a portion of text which has been given the html lang attribute. The value of lang should be included inside the brackets. Lang specifies the language of text on a web page, and using this pseudoclass enables different languages to be styled in different ways.

CSS3 Pseudoclasses

The full list of pseudoclasses added in CSS3 can be found here:

Sitepoint CSS3 Pseudoclasses

Remember to use these with caution. Keep newer pseudoclasses to inessential styling if possible, to avoid issues with readability of your page. Internet explorer in particular does not recognise the nth-child pseudoclass.


Tags: , , , , , , , , , , , , , , , ,

This entry was posted on Wednesday, August 10th, 2011 at 8:52 am and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply