HTML and CSS Reference
In-Depth Information
Link-Related Pseudo-Classes
Even if you have just a passing familiarity with using a Web site, you'll note that there are
three primary states to typical text links—unvisited, visited, and active (mid-press)—in
which the link text color is blue, purple, and red, respectively. In CSS, the presentation of link
states is controlled through the pseudo-class selectors
a:link
,
a:visited
, and
a:active
.
CSS2 also adds
a:hover
for the mouse hovering over a link, though this pseudo-class in
theory isn't limited to links. Similarly, the pseudo-class
:focus
would be selected when the
link gains focus—generally through keyboard navigation. An example demonstrating how
these link-related pseudo-class selectors are used is shown here:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Link Pseudo-Class Example
</title>
<style type="text/css" media="all">
a:link {color: blue; text-decoration: none;}
a:active {color: red; background-color: #FFC;}
a:visited {color: purple; text-decoration: none;}
a:hover {color: red; text-decoration: underline;}
a:focus {border-style: dashed; border-width: 1px;
background-color: #FFA500;}
</style>
</head>
<body>
<a href="http://www.htmlref.com">
HTML: The Complete Reference
</a>
</body>
</html>
O
NLINE
http://htmlref.com/ch4/linkstates.html
Although the CSS rules associated with the states of a link can be used to change the link's
appearance in dramatic ways, designers are encouraged to limit changes to improve usability.
Also note that size changes and other significant differences in link presentation can result in
undesirable screen refreshes as the document reloads. For example, with a rule such as
a:hover {font-size: larger;}
you may notice text lines shifting up and down as you roll over links.
A newer link-related pseudo-class is
:target
, which is used to style an element when it
is a link target and the current URL of the document has that fragment identifier in its URL.
For example, given the rule
#top:target {background-color: green;}
a tag like
<span id="top">
I am the top of the document.
</span>
