:focus擬似クラス。

CSSでのセレクタ(選択子)の一つである、:focus擬似クラスに関して解説します。

`:focus`擬似クラスとは。

:focus擬似クラスとは、当該要素に閲覧者がフォーカスを合わせている状態のみ対象とする擬似クラスセレクタです。

具体的には、マウスで当該箇所を軽くクリックした場合などが対象となります。

この擬似クラスは、仕様上は特に対象となる要素を限定しておりません。

`:focus`擬似クラスの書式。

:focus擬似クラスの書式は、

セレクタ:focus

です。

ここで、セレクタとしては任意のものが使えますが、対象要素を問わない場合なら全称セレクタ(汎用セレクタ)を省略出来ます。

`:focus`擬似クラスの使用上の注意。(平成18年 7月18日訂正)

:focus擬似クラスと

を併用する場合は、意味上の理由から、必ず以下の順序に従って記述して下さい。

この順序を守らないと無効になってしまいます。

- :focus擬似クラス
- :active擬似クラス
- :hover擬似クラス
はいずれもリンクのアンカーを表す要素では無いため、
- :link擬似クラス
- :visited擬似クラス
の前にこれらの擬似クラスが書かれていると、後方の:link擬似クラスまたは:visited擬似クラスが無意味と見なされてしまうからです。
また、
1. :focus擬似クラスまたは:hover擬似クラス
2. :active擬似クラス
の前後関係も、:active擬似クラスが前に来ると意味がありません。

なぜなら、:active擬似クラスの定義から、:active擬似クラスとなる要素は、必ず:focus擬似クラスまたは:hover擬似クラスのどちらかの状態になっている筈だからです。

`:focus`擬似クラスの実装上の注意。

`:focus`擬似クラスのPC向けユーザエージェントでの実装上の注意。

:focus擬似クラスは、

ネットスケープ 4.x
インターネットエクスプローラのウィンドウズ版6.xまでとマッキントッシュ版4.xまで
オペラ 6.x

には実装されておりません。

`:focus`擬似クラスのWAP 2.0での実装上の注意。

WAP 2.0では、:focus擬似クラスは必須ではありません。

オープンウェーヴ社のWAP 2.0 ウェブブラウザでも:visited擬似クラスは実装されておりません。

関連項目。

しらぎくのウェブサイト作成入門サイトマップ