:active

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

試してみましょう

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

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

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

構文

css
:active {
  /* ... */
}

アクティブなリンク

HTML

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

CSS

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

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

結果

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

HTML

html
<form>
  <label for="my-button">ボタン: </label>
  <button id="my-button" type="button">
    ここかラベルをクリックしてみてください。
  </button>
</form>

CSS

css
form :active {
  color: red;
}

form button {
  background: white;
}

結果

仕様書

Specification
HTML
# selector-active
Selectors Level 4
# active-pseudo

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:active
Non-a element support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報