:active
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 の定義 |
勧告 | 初回定義。 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。