last modified 10th/Oct. 2000
殆どのブラウザでは始点アンカー（href 属性を持つ A 要素）には下線が引かれ、訪問済みのリンクと未訪問のリンクの色を変化して区別できます。
これらは CSS によって調整できます；
CSS1 での link 擬似クラスに付いて紹介します。ハイパーリンク（href 属性を持つ Anchor 要素）が訪問済みと未訪問で色が変化する「あれ」です。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>Link Pseudo-Element</title>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
A:link { color: navy; text-decoration: underline }
A:visited { color: maroon; text-decoration:none }
A:active { color: green }
-->
</style>
</head>
<body>
<p>
この文書中の始点アンカーは、未訪問の場合は紺色、訪問済みの場合は栗色、
アクティブな場合は深緑色で表示されます。
</p>
</body>
</html>
| a:link | 未訪問のリンク | 色は紺色で下線が引かれる |
|---|---|---|
| a:viisted | 訪問済みのリンク | 栗色で下線が引かれない |
| a:active | アクティブ状態のリンク | 緑色 |
或る要素に注目し、その状態によって区別するセレクタを「疑似クラス」と呼びます。 CSS1 では href 属性を持つ A 要素（リンク）に限り疑似クラスが定義されています。
| :link | 未訪問のリンク |
|---|---|
| :visited | 訪問済みのリンク |
| :active | 作動中のリンク |
例えば、 a:active の場合は、「 A 要素であり、且つ活動中でる状態」を取り出して、スタイルを適用します。
これらの疑似クラスは何れも相互に排他的で、例えば「 :link 且つ :active な要素」は有り得ません。
これらはリンク要素にしか適用できない疑似クラスなので、要素名は省略しても等価です。即ち、次の二行は全く同じ処理を指定しています；
A:link { color: navy } /* :link 疑似クラスを持つ A 要素にマッチ */
:link { color: navy } /* 上に同じ */
| :active | 活動中の状態 |
|---|---|
| :hover | カーソルなどのポインタが上に乗っている状態 |
| :focus | テキスト入力、タブキー移動など、ユーザの操作対象になっている状態 |
CSS2 の疑似セレクタはどの要素にも適用でき、 p:hover とあれば、「 P 要素であり、且つカーソルが上に乗っている状態」を取り出して、宣言されているスタイルを適用します。
:link { color: navy } /* a:link と同じ */
:visited { color: maroon } /* a:visited と同じ */
:link, :visited { text-decoration: underline }
a:hover { color: purple; text-decoration: none }
a:active { color: green }
a:focus { color: black; font-style: italic }
| :link | 未訪問のリンク | 色は紺色で下線が引かれる |
|---|---|---|
| :viisted | 訪問済みのリンク | 栗色で下線が引かれる |
| a:hover | カーソルが上に乗った状態のリンク | 紫色で下線が引かれない |
| a:active | アクティブ状態のリンク | 緑色 |
| a:focus | フォーカスされているリンク | 黒色でフォントが斜体 |
CSS2 では、 CSS1 で既に定義されていた :active 疑似クラスが再定義された他、 :hover と :focus が追加されました。殆どのブラウザは :focus 状態と :active 状態を区別せず、 :active に対するスタイルを適用します。
:hover, :focus, :active は何れも相互に相補的であり、排他的では有りません。従って、「:hover であり且つ :active な要素」が存在し得ます。従って、スタイルの継承が通常の規則通りに適用されますので、記述する順番が重要になります；
上の例で、 a:hover が a:visited, a:link よりも前に記述されると、 a:hover のスタイルは上書きされてしまいます。また、 a:active が a:hover よりも後ろに記述されている為、リンクにカーソルが乗っていてもスタイルは a:active のものが適用されます。