: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.

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

試してみましょう

: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 Standard
# selector-active
Selectors Level 4
# the-active-pseudo

ブラウザーの互換性

BCD tables only load in the browser

関連情報