We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

CSS:active 疑似クラスは、ユーザーによってアクティブ化されている要素 (ボタンなど) を表します。「アクティブ化」とはふつう、マウスを使用する場合は第1ボタンを押し下げたときに始まり、離したときに終わります。 :active 疑似クラスは <a><button> 要素でよく使われますが、他の要素でも使用することができます。

/* アクティブ化されている <a> をすべて選択します */
a:active {
  color: red;
}

:active 疑似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の疑似クラス (:link:hover:visited)によって上書きされます。適切にリンクにスタイルを適用するには、 LVHA 順: :link:visited:hover:active で定義されるように、他のすべてのリンク関連規則の後に :active 規則を置いてください。

メモ: 複数ボタンのマウスを使うシステムでは、 CSS 3 は :active 擬似クラスは第1ボタン、つまり右手用のマウスではふつう一番左のボタンにのみ適用しなければならないと定義しています。

構文

:active

HTML

<a href="#">このリンクはクリックしている間、ライム色になります。</a>

CSS

a:link { color: blue; }          /* 未訪問リンク */
a:visited { color: purple }     /* 訪問済みリンク */
a:hover { background: yellow; }  /* ホバー時 */
a:active { color: lime }       /* アクティブなリンク */

結果

仕様書

仕様書 策定状況 コメント
HTML Living Standard
:active の定義
現行の標準  
Selectors Level 4
:active の定義
草案 変更なし。
Selectors Level 3
:active の定義
勧告 変更なし。
CSS Level 2 (Revision 1)
:active の定義
勧告 変更なし。
CSS Level 1
:active の定義
勧告 初回定義。

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1 あり1451
Non-a element support1 あり1871
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応1 ? あり461 ?
Non-a element support1 ? あり4 ? あり1 ?

1. By default, Safari on iOS does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body> element.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, momdo, ethertank, sosleepy
最終更新者: mfuji09,