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
- :hover while the mouse is over the selected element
- :active while the mouse is clicking the selected element
- :focus while the selected element has the keyboard focus
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.