基本疑似クラス
:active
要素がアクティブになった（選択された）時
unknown
E:active {}
:active擬似クラスは、要素がアクティブになった時に適用されます。
a:active { text-decoration:none; }
a.menu:active { text-decoration:none; }
:first-child ※IE未対応
要素の最初の子要素にのみスタイルを適用
unknown
ブロック要素:first-child
ブロック要素.クラス名:first-child
ブロック要素.クラス名:first-child
IE未対応
:first-child擬似要素は、親要素内の最初の子要素にスタイルを適用します。
<style type="text/css">
div.fc {
border:1px dotted #ccc; padding:10px;
}
div.fc a:first-child {
background-color:yellow;
}
</style>
検索エンジンシェアTOP3
<div class="fc">
No1. <a href="http://www.yahoo.co.jp">Yahoo!JAPAN</a><br>
No2. <a href="http://www.google.co.jp">Google</a><br>
No3. <a href="http://www.infoseek.co.jp">Infoseek</a>
</div>
検索エンジンシェアTOP3
:focus
要素にフォーカスが当たった時
unknown
E:focus {}
:focus擬似クラスは、要素にフォーカスが当たっている時に適用されます。
<style type="text/javascript">
textarea:focus { color:#fff; background-color:#000; }
textarea:focus:hover { color:#000; background-color:#fff; }
</style>
:hover
要素にマウスが乗った時
unknown
E:hover {}
:hover擬似クラスは、要素にマウスが乗った時、かつ要素がアクティブでない時に適用されます。
a:hover { text-decoration:none; }
a.menu:hover { text-decoration:none; }
:link
未訪問リンク
unknown
E:link {}
:link擬似クラスは、未だ訪問されていないリンク（a要素）に適用されます。
a:link { text-decoration:none; }
a.menu:link { text-decoration:none; }
:visited
訪問済みリンク
unknown
E:visited {}
:visited擬似クラスは、既に訪問済みのリンク（a要素）に適用されます。
a:visited { text-decoration:none; }
a.menu:visited { text-decoration:none; }
リンクの記述例
unknown
<style type="text/css">
a { color:blue; }
a:hover { color:red; }
a:active { color:red; }
a:visited { color:purple; }
</style>