スポンサード リンク
擬似クラス: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にスタイルを適用できます(ロールオーバーとはマウスが要素と重なるときのこと)css
a:hover { color : lightseagreen; } /* href属性をつけたa要素のスタイルを適用(文字色をライトシーグリーンに指定) */
html
<a href="index.html">a要素</a>
実際の表示
a要素擬似クラス:active
クリック時、要素にスタイルを適用できます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>