:link【未訪問リンク要素】疑似クラス
:visited【訪問済みリンク要素】疑似クラス
:target【リンク先要素】疑似クラス

メモ 外部リンク 構文 例

メモ

構文

構文説明
E:link  { スタイル定義 } 未訪問リンクのE要素に適用
E:visited  { スタイル定義 } 訪問済みリンクのE要素に適用
E:target  { スタイル定義 } リンク先のE要素に適用

例

<style>
#linkA:link { font-weight: bold; }
#linkB:visited { font-style: italic; }
#link1:target { color: red; font-weight: bold; }
#link2:target { color: red; font-weight: bold; }
#on-off:target { display: none; }
</style>

<div><a id="linkA" href="#not">未訪問リンク</a></div>
<div><a id="linkB" href="pseudo-class-link-css.html">訪問済みリンク (このページ)</a></div>
<div><a href="#link1">リンク１へ (クリックするとリンク先が変化)</a></div>
<div><a href="#link2">リンク２へ (クリックするとリンク先が変化)</a></div>
<div id="link1">リンク１</div>
<div id="link2">リンク２</div>
<div><a href="#on-off">非表示 (クリックすると下の表示が変化)</a> ・ <a href="#reset">リセット</a></div>
[<span id="on-off">表示 → 非表示</span>]
<span id="reset"></span>

リンク１
リンク２
[表示 → 非表示]