セレクタ:active { プロパティ:値 ; …}
セレクタ:focus { プロパティ:値 ; …}
CSS/HTMLの書き方
CSS
セレクタ:active { プロパティ:値 ; プロパティ:値 ; …}
セレクタ:focus { プロパティ:値 ; プロパティ:値 ; …}
解説
マウスでクリックしているときや、マウスのカーソルがある部分にフォーカスされている時にのみ働くスタイルシートの指定方法です。
例えば、フォームの入力中にだけフォームの背景色を変えたりすることができます。
これら「：active」や「：focus」のことを「動的擬似クラス」と言います。
アクティブ（：active）
アクティブとは、ブラウザの画面上でマウスをクリックしてから離すまでの動作を指します。
指定した要素をアクティブにしているときにその要素に書式を適用させることができます。
フォーカス（：focus）
フォーカスとは、ブラウザの画面上でマウスをクリックし、入力状態にあるまでの動作を指します。
指定した要素をフォーカスにしているときにその要素に書式を適用させることができます。
対応状況
これらの動的擬似クラスが適用できる要素はブラウザによって対応状況が様々です。
また、中には、「：active」と「：focus」を同時に指定しなければ動作しない要素もあります。
| activeを適用できる要素 | IE 5.0以上 | NS7.1 | FF1.0 | OP8.0 | SF | MAC IE5.0 |
|---|---|---|---|---|---|---|
| a （リンク） | ○ | ○※ | ○※ | ○ | ○ | ○ |
| input type=”text” （1行テキスト） | × | × | × | ○ | ○ | × |
| input type=”radio” （ラジオボタン） | × | × | × | ○ | × | × |
| input type=”checkbox” （チェックボックス） | × | × | × | ○ | × | × |
| input type=”botton” （汎用ボタン） | × | ○※ | ○※ | ○ | × | ○ |
| select （リストボックス） | × | × | × | × | × | × |
| textarea （複数行テキスト） | × | × | × | ○ | ○ | × |
| div （汎用ブロックレベル要素） | × | ○ | ○ | ○ | ○ | × |
| ※「：focus」を併用する場合は、「：focus」を「：active」の前に書くことが必要 | ||||||
引用元（一部改）：藤本 壱、スタイルシート ポケットリファレンス、技術評論社、P57、2005
| focusを適用できる要素 | IE 5.0以上 | NS7.1 | FF1.0 | OP8.0 | SF | MAC IE5.0 |
|---|---|---|---|---|---|---|
| a （リンク） | ○ | ○ | ○ | × | ○ | ○ |
| input type=”text” （1行テキスト） | × | ○ | ○ | ○ | ○ | ○ |
| input type=”radio” （ラジオボタン） | × | × | × | ○ | × | × |
| input type=”checkbox” （チェックボックス） | × | × | × | ○ | × | × |
| input type=”botton” （汎用ボタン） | × | ○ | ○ | ○ | × | ○ |
| select （リストボックス） | × | ○ | ○ | ○ | × | ○ |
| textarea （複数行テキスト） | × | ○ | ○ | ○ | ○ | ○ |
※引用元（一部改）：藤本 壱、スタイルシート ポケットリファレンス、技術評論社、P57、2005
CSS/HTMLサンプル
a:active,input:active,select:active,textarea:active,div:active { background:#ffdff9; }
a:focus,input:focus,select:focus,textarea:focus,div:focus { background:#eeeeee; }
マウス動作時の要素に背景色を適用する サンプル
