基本疑似クラス
: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>