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

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

:active 疑似クラスは、 <a> 及び <button> 要素で使われます。この疑似クラスで他のよくあるターゲットとしては、アクティブ化される要素を含む要素や、関連付けられた <label> 要素を通してアクティブ化されるフォーム要素です。

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

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

構文

:active

HTML

<p>この段落にはリンクが含まれています。
  <a href="#">このリンクはクリックすると赤色になります。</a>
  この段落は段落やリンクをクリックすると灰色になります。
</p>

CSS

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

p:active { background: #eee; }   /* アクティブな段落 */

結果

フォーム要素をアクティブ化

HTML

<form>
  <label for="my-button">My button: </label>
  <button id="my-button" type="button">Try Clicking Me or My Label!</button>
</form>

CSS

form :active {
  color: red;
}

form button {
  background: white;
}

結果

仕様書

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 4Opera 完全対応 5Safari 完全対応 1WebView Android 完全対応 1Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 6Safari iOS 完全対応 1Samsung Internet Android ?
Non-a element supportChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 8Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 1Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android ? Safari iOS 完全対応 あり
補足
完全対応 あり
補足
補足 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.
Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

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

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