

“:active”擬似クラス
“:active”擬似クラスはユーザーの操作によりアクティブ化されている要素を選択する擬似クラスです。
通常、パソコンでは要素をマウスでクリックしている間にこの状態になります。マウスのボタンが複数ある場合はメインのボタン(通常のマウスでは左のボタン)でクリックした場合のみが対象になります。
文書の記述言語によってはどの要素がアクティブ化できるのかを定義している場合があります。また、文書の記述言語によってはアクティブ化されている状態を判断する追加の方法を定義している場合があります。例えば、HTMLではラベル付け可能要素は関連付けられた“label”要素がアクティブ化されていればアクティブ化されていると判断されます。
要素の子孫要素がアクティブ化されている状態でも“:active”擬似クラスによって選択されます。
文書ツリーで子孫要素であれば良いので、子孫要素が実際にその要素の中に描画されている必要はありません。
要素は“:any-link”擬似クラス、“:link”擬似クラス、“:visited”擬似クラス、“:hover”擬似クラス、“:focus”擬似クラス、“:active”擬似クラスなどの擬似クラスの中から複数の擬似クラスから同時に選択される場合があります。同じ要素に対して複数の擬似クラスを併用する場合にはスタイルが競合することがありますので、記述する順序に気を付ける必要があります。
アクティブ化できる要素
HTMLでは以下の要素がアクティブ化可能と定義されています。
- 無効化されていない“button”要素
- 無効化されておらず、“type”属性の値が“submit”、“image”、“reset”、“button”のいずれかである“input”要素
- “href”属性がある“a”要素
- “href”属性がある“area”要素
- “href”属性がある“link”要素
- フォーカス可能な要素
- ポインタ・デバイスで押下(マウスクリックやタッチ画面のロングタップなど)されている要素
- 子孫要素がアクティブ化されている要素
- 関連付けられた“label”要素がアクティブ化されているラベル付け可能要素
フォーム関連要素が無効化されているのは“disabled”属性がある場合、もしくは祖先要素である“fieldset”要素に“disabled”属性がある場合です。
仕様書
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
Pseudo-classes|The dynamic pseudo-classes: :hover, :active, and :focus
CSS Selectors Level 3
Pseudo-classes|The user action pseudo-classes :hover, :active, and :focus
CSS Selectors Level 4
Location Pseudo-classes|The Activation Pseudo-class: :active
定義されている仕様書
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|
![]() | ![]() | ![]() | ![]() | |
:active | ![]() ![]() |
![]() ![]() |
![]() ![]() |
![]() ![]() |
HTML Living Standard
Matching HTML elements using selectors and CSS|Pseudo-classes