:active クラス
:active クラスは、エレメントがアクティブ化（マウスクリックなどユーザーの操作を受け付けた状態）になったら、設定されたスタイルを反映するCSSの擬似クラスです。
多くの場合、:active クラスを利用するのは <a>、<button> などのクリックを受付けるエレメントが想定されます。
a:active {
background-color: red;
}
詳しくは Example を参照してください
:active クラスに似た疑似クラスに:link、 :visited、 :hover があります。
これらの疑似クラスにはユーザーに対する反応が想定されています。
:linkは未訪問、:visited は訪問済み、:hover はエレメントの上をマウスポインターがある状態、:active はクリックされた状態です。
スタイルを反映する優先順位は、:link —> :visited —> :hover —> :active と想定されており、
より右側の状態の設定が優先されます。:hover の設定は :active の設定で上書きされるということです。
ページ内 Index
構文(Syntax)
CSS
HTMLElement:active {
スタイルプロパティ...
}
DOM ( JavaScript )
疑似クラスはDOMから操作できません。
該当するものはmousedown(onmousedown)イベントです。
:hoverや:activeのように、マウスポインターへの反応やクリックにおけるスタイルの適応は擬似クラスを利用したほうが簡易です。
in HTML
<tagelement onmousedown="oneFunction()">
in JavaScript
object.onmousedown = function(){ };
object.addEventListener("mousedown", script_);
詳しくはmousedown(onmousedown)イベントを参照して下さい。
Example
:hoverと:active クラスの例です。:hoverでマウスポインターを例文にもってくると点線で例文を囲みます。 クリックすると例文のバックグランドと囲み線が変化します。