擬似クラスは要素の特定方法を拡張し、外部情報を用いたスタイル設定を可能にします。
ユーザエージェント(ブラウザ)ではアンカーの表示を未閲覧、閲覧済みなどによって分けています。 スタイルシートではこの違いをアンカー要素の疑似クラスで区別して扱えるようにしています。
アンカー疑似クラスの種類を示します。
| 疑似クラス名 | 意味 |
|---|---|
| A:link | 未訪問のリンク |
| A:visited | 訪問済みのリンク |
| A:hover | マウスポインターがアンカー上にある |
| A:active | 選択されているアンカー（マウスをクリックしている） |
例えば、未訪問のリンクを赤、訪問済みを青、マウスポインターがリンク上にあるときは緑、選択されてアクティブなリンクはシアンにするには次のように記述する。
A:link { color : red }
A:visited { color : blue }
A:hover { color : green }
A:active { color : cyan }
アンカーの下線の表示を消すにはtext-decoration属性にnoneを指定すればよい。
A { text-decoration : none }
疑似クラスA:hoverにbackground-color属性を指定すればよい。
A:hover { color : green; background-color : orange; }
アンカー疑似クラスは文脈セレクタ、クラスとも組み合わせできる。
次の例はアンカーにIMG要素を組み合わせる場合です。
A:link IMG { border: solid blue }
次の例はクラスとの組み合わせ例です。
A.sample:link { color : blue }
<A class=”sample” href=”sample.html”>サンプル</A>