CSS3.0のセレクタ - 擬似クラス
E:link/E:visited : 未訪問 (:link) であるもの、訪問済 (:visited)
E:active : ユーザーによって実行されたE要素
E:hover : ユーザーがポインティングデバイスで示したE要素
E:focus : ユーザーによって実行されたE要素
E:enabled / E:disabled
UI 要素である E のうち、有効 (:enabled) であるもの、無効 (:disabled) であるもの
**なお、表示非表示(display、visibility)は有効無効に影響を及ぼさない。
E:checked : UI 要素である E のうち、チェックされた (:checked) もの (チェックボックスやラジオボタンなど)
E:default : UI 要素である E のうち、デフォルトチェックの要素
E:target : URI が参照した(ハッシュ指定されている)ターゲットになる E 要素
E:read-only : 読取のみUI
E:read-write : 読取&書込のみUI
**E::selection: 選択中UI
E:lang(C) : 言語情報 C を持つ E 要素
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 擬似クラス </title> <style type="text/css"> td { border:1px solid black; padding:4px; } /* マウスがをの合わせた */ tr:hover { background-color: #aaa; } /* 実行 */ input:active { background-color: blue; } /* フォーカス取得 */ :focus { text-decoration: underline; } /* 有効 */ :enabled{ font-weight: bold; font-size:14pt; } /* 無効 */ :disabled{ font-size:14pt; } /* チェック */ :checked { outline: red solid 5px; } /* デフォルト */ :default { outline: #bbb solid 5px; } </style> </head> <body> <table style="width:400px;border-collapse:collapse"> <tr> <td>1行目だよ</td><td>100</td> </tr> <tr> <td>2行目だよ</td><td>200</td> </tr> <tr contentEditable="true"> <td>3行目だよ</td><td>300</td> </tr> </table> <button disabled>無効ボタン</button> <input type="text" disabled value="無効テキスト"/> <button>有効ボタン</button> <input type="text" value="有効テキスト"/> 男性<input type="radio" value="male" name="gender"/> 女性<input type="radio" value="female" name="gender"/> 不明<input type="radio" checked value="unknown" name="gender"/> </body> </html>