CSSでリンクのデザイン

※新規ウインドウで開きます PDF印刷Eメール

疑似クラス

CSSには、自分で設定する「クラス」の他にあらかじめ用意されている「疑似クラス」があります。
リンク要素とセットで使用し、以下のように記述します。

a:link{color:#ff0000;}

セレクタと疑似クラスの間は「:(コロン)」で区切ります。

疑似クラス 説明
:link 未アクセスのリンク部分を指定
:visited アクセス済みのリンク部分を指定
:hover 選択したリンク部分を指定
:active クリックしたときのリンク部分を指定

HTMLで指定した時はページ全体の指定になりましたが、
CSSで指定する時は、クラスやIDと組み合わせることで
一部のリンクにのみスタイルを適用することが出来ます。

td id="csslink1"

#csslink1 a:link{color:#ff0000;}
#csslink1 a:visited{color:#999999;}
#csslink1 a:hover{color:#ffffff; background-color:#ff0000;}
#csslink1 a:active{color:#ff3333;}

td id="csslink2"

#csslink2 a:link{color:#0000ff; text-decoration:none;}
#csslink2 a:visited{color:#00ff00;}
#csslink2 a:hover{color:#ffffff; background-color:#0000ff;}
#csslink2 a:active{color:#3333ff;}

td id="csslink3"

#csslink3 a:link, #csslink3 a:visited{color:#ffffff; background-color:#02c4ff; border:3px ridge #027699;}
#csslink3 a:hover, #csslink3 a:active{background-color:#028ab3;}

a:linkで設定したスタイルは他の疑似クラスにも適用されます。
上記例のcsslink3では文字色と枠線は常に同じで、
リンクを選択かクリックした時に背景色のみ変更されるように指定しています。