HTML and CSS Reference
In-Depth Information
There are two types of dynamic pseudo-classes: link and user action ones.
The link are
:link
and
:visited
, while the user action ones
are
:hover,
:active
and
:focus.
From all the CSS selectors mentioned in this post, these will probably be the
ones that are most commonly used.
The
:link
pseudo-class applies to links that haven't been visited by the
user, while the
:visited
pseudo-class applies to links that have been
visited, so they are mutually exclusive.
The
:hover
pseudo-class applies when the user moves the cursor over the
element, without having to activate or click on it. The
:active
pseudo-class
applies when the user actually clicks on the element. And finally the
:focus
pseudo-class applies when that element is on focus — the most common
application is on form elements.
You can use more than one user action dynamic pseudo-class in your
stylesheets, so you can have, for example, a di
"
erent background color for
an input field depending on whether the user's cursor is only hovering over
it or hovering over it while in focus:
input:focus {
background: #D2D2D2;
border: 1px solid #5E5E5E;
}
input:focus:hover {
background: #C7C7C7;
}
Notes on browser support
The dynamic pseudo-classes are supported by all modern browsers, even
IE6. But bear in mind that IE6 only allows the
:hover
pseudo-class to be
