HTML and CSS Reference
In-Depth Information
Figure 3-51
Dynamic pseudo-classes
The link has not yet been visited
by the user.
a:link {color: red;}
The link has been visited by
the user.
a:visited {color: green;}
The element is in the process of
being activiated or clicked by
the user.
a:active {color: yellow;}
The mouse pointer is hovering
over the element.
a:hover {color: blue;}
The element has received the
focus of the keyboard or mouse
input:focus {background-color: yellow;}
In some cases, two or more pseudo-classes can apply to the same element. For
example, a hypertext link can be both previously visited and hovered over. In such situ-
ations, the standard cascading rules apply—the pseudo-class that is listed last is applied
to the element. You should enter the hypertext pseudo-classes in the following order in
your style sheets— link , visited , hover , and active . The link pseudo-class comes
fi rst because it represents a hypertext link that has not yet been visited or even clicked
by the user. The visited pseudo-class comes next, for links that previously have been
visited or clicked. The hover pseudo-class follows, for the situation in which a user has
once again moved the mouse pointer over a hypertext link before clicking the link. The
active pseudo-class is last, representing the exact instant in which a link is clicked by a
user. Any styles set with the link pseudo-class are inherited by the visited , hover , and
active pseudo-classes.
Creating a Hypertext Rollover
• To create a rollover for a hypertext link, apply the styles
a:link { styles ;}
a:visited { styles ;}
a:hover { styles ;}
a:active { styles ;}
to the a element, where styles are the CSS styles applied to hypertext links that
have not been visited ( link ), have already been visited ( visited ), have the mouse
pointer over them ( hover ), or are actively being clicked ( active ).
The hover , active , and focus dynamic pseudo-classes also can be applied to non-
hypertext elements. For example, the following style rule causes the background color
of each entry in a navigation list to change to medium blue whenever a user hovers the
mouse pointer over it:
nav ul li:hover {
background-color: rgb(83, 142, 213);
Tammy suggests that you add this style rule to provide users with the visual feedback
that is missing from the navigation links as a result of removing the underlining.
Search WWH ::

Custom Search