:active擬似クラス。
CSSでのセレクタ(選択子)の一つである、:active擬似クラスに関して解説します。
:active擬似クラスとは。
:active擬似クラスとは、当該要素を閲覧者が指定している状態のみ対象とする擬似クラスセレクタです。
- 具体的には、マウス操作の場合、当該要素をクリックしている状態のみを対象とします。
この擬似クラスは、仕様上は特に対象となる要素を限定しておりません。
:active擬似クラスの書式。
:active擬似クラスの書式は、
セレクタ:active
です。
ここで、セレクタ
としては任意のものが使えますが、対象要素を問わない場合なら全称セレクタ(汎用セレクタ)を省略出来ます。
:active擬似クラスの使用上の注意。(平成18年 7月18日 訂正)
:active擬似クラスと
を併用する場合は、意味上の理由から、必ず以下の順序に従って記述して下さい。
:link擬似クラスまたは:visited擬似クラス:hover擬似クラスまたは:focus擬似クラス:active擬似クラス
この順序を守らないと無効になってしまいます。
-
:active擬似クラス:hover擬似クラス:focus擬似クラス
はいずれもリンクのアンカーを表す要素では無いため、
の前にこれらの擬似クラスが書かれていると、後方の
:link擬似クラスまたは:visited擬似クラスが無意味と見なされてしまうからです。 - また、
:hover擬似クラスまたは:focus擬似クラス:active擬似クラス
の前後関係も、
:active擬似クラスが前に来ると意味がありません。なぜなら、
:active擬似クラスの定義から、:active擬似クラスとなる要素は、必ず:hover擬似クラスまたは:focus擬似クラスのどちらかの状態になっている筈だからです。
:active擬似クラスの実装上の注意。
:active擬似クラスのPC向けユーザエージェントでの実装上の注意。
:active擬似クラスは、
- ネットスケープ 4.x
には実装されておりません。
また、
- オペラ 6.x
でも:active擬似クラスの挙動がおかしい場合があります。
:active擬似クラスのWAP 2.0での実装上の注意。
WAP 2.0では、:active擬似クラスは必須ではありません。
- オープンウェーヴ社のWAP 2.0 ウェブブラウザでも
:visited擬似クラスは実装されておりません。