Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us [email protected].

complete css guide

Dynamic pseudo class selectors

Browser support

Get browser support information for dynamic pseudo class selectors in the downloadable version of this guide or our browser support tables.

Explanation

In CSS 1 the pseudo class selector, which we saw previously, could only be applied to <a> elements. CSS 2 extended pseudo class selectors so that the hover and active states could be applied to any elements. As well, the focus state was added and the whole selector was renamed the dynamic pseudo class selector. (Note for CSS trainspotters: strictly speaking a:hover and a:active, which this guide refers to as link pseudo class selectors, are dynamic pseudo class selectors. Only a:link and a:visited are true link pseudo class selectors.)

Syntax

The form of the dynamic pseudo class selector is simply to add one of the following states to any selector. The possible states are

For example, to change the background color of a paragraph when the mouse is over it, you use the selector p:hover. More complex selectors can also be used in conjunction with the dynamic pseudo class selector. For example, to change the background color of only paragraphs of class "introduction" while they are being clicked, use the selector p.introduction:active.

Use

The dynamic pseudo class selector extends the existing link pseudo class selectors. Now you can make any element on the page have these particular dynamic behaviors. We don't really need to explain too much the power of feedback for the user, but one of the more obvious examples might be their use in forms or any type of web page that enables user interaction.