:link :visited :active :hover

TOPページに戻る > CSS

擬似クラス:link

未訪問のlinkにスタイルを適用できます このクラスはhref属性をつけたa要素のみ有効です

使い方（書式）

a:link { color : orange; }
/* href属性をつけたa要素のスタイルを適用(文字色をオレンジに指定) */

対応ブラウザ

html

<a href="index.html">a要素</a>

実際の表示

a要素

擬似クラス:visited

訪問済みのlinkにスタイルを適用できます このクラスはhref属性をつけたa要素のみ有効です

css

a:visited { color : hotpink; }
/* href属性をつけたa要素のスタイルを適用(文字色をホットピンクに指定) */

html

<a href="index.html">a要素</a>

実際の表示

a要素

擬似クラス:hover

ロールオーバーでlinkにスタイルを適用できます（ロールオーバーとはマウスが要素と重なるときのこと）
ie7以上のブラウザではhref属性をつけたa要素以外にも有効です（ie6はa要素のみ適用）
※文字の色の他にbackground-colorを使って背景色も変更できます

css

a:hover { color : lightseagreen; }
/* href属性をつけたa要素のスタイルを適用(文字色をライトシーグリーンに指定) */

html

<a href="index.html">a要素</a>

実際の表示

a要素

擬似クラス:active

クリック時、要素にスタイルを適用できます
ie7以上のブラウザではhref属性をつけたa要素以外にも有効です（ie6はa要素のみ適用）

css

a:active { color : lime; }
/* href属性をつけたa要素のスタイルを適用(文字色をライムに指定) */

html

<a href="index.html">a要素</a>

実際の表示

a要素

擬似クラスの順序

擬似クラスには順序があります
順序どおりに指定しないとスタイルが適用できなくなることがあります

順序

a:link { color : orange; }         /* リンクの文字色をオレンジに指定 */
a:visited { color : hotpink; }     /* 訪問済みリンクの文字色をホットピンクに指定 */
a:hover { color : lightseagreen; } /* ロールオーバーで文字色をライトシーグリーンに指定 */
a:active { color : lime; }         /* クリックでリンクの文字色をライムに指定 */

/* link、visited、hover、activeの順に指定してください */

html

<a href="index.html">a要素</a>

実際の表示

a要素

他のセレクタと同時に使う

擬似クラスはclassセレクタ、idセレクタ、属性セレクタなど他のセレクタと組み合わせて使うことができます

css

a.hoge:link { color : lime; }
/* a要素のhogeクラスにスタイルを適用*/

html

<a class="hoge" href="index.html">a要素</a>