HTML and CSS Reference
In-Depth Information
Pseudo-Classes
Pseudo-classes are best understood by way of the anchor element, typically used for links
between (X)HTML documents. It is commonplace for links to documents a user has visited in
the past to be displayed differently than ones they haven't visited. But there's simply no way
for you, as the web developer, to predefine this, because you haven't a clue what documents
your visitor may have already hit.
To compensate for this, CSS 2.1 defines two pseudo-classes specifically for hyperlinks.
Pseudo-classes are indicated by use of a colon (
:
). The two link-specific (with
link
defined as
an anchor element with an
href
attribute) pseudo-classes are
•
:link
, which refers to links that point to documents that have not been visited. Some
browsers interpret this incorrectly and apply it to all links, visited or not.
•
:visited
, which refers to hyperlinks to an address that has already been visited.
Using these pseudo-classes, you can make unvisited links blue and visited ones purple like so:
a:link {
color: blue;
}
a:visited {
color purple;
}
A couple of other common pseudo-classes are
:hover
and
:focus
. These are activated
based on the current state an element is in with regard to the user's interaction with it. The
hover state is activated when a user hovers on an element. Most typically, the hovering behavior
is rolling over the element with a mouse. However, it's important to note that users on alternate
devices may hover in a different manner. The focus state is activated when a user gives a par-
ticular element (especially a form field) focus by selecting it. In the typical desktop browser
environment, this is done by tabbing to the element, or by clicking in a form field. Using these
two pseudo-classes, you can easily change the display of an element only when these states
are activated. For example:
a:hover {
color: red;
}
tr:hover {
background-color: #dfdfdf ;
}
input:focus {
background-color: #dfdfdf ;
}
■
Note
Microsoft Internet Explorer 6 and below supports pseudo-classes only on links (anchor elements
with an
href
attribute). It does not allow for
:hover
,
:focus
, and so forth on arbitrary elements.
