このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
:active
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
:active は CSS の擬似クラスで、ユーザーによってアクティブ化されている要素(ボタンなど)を表します。マウスを使用する場合は、「アクティブ化」とはふつう、主ボタンを押し下げたときに始まります。
試してみましょう
.joinBtn {
width: 10em;
height: 5ex;
background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
border: none;
border-radius: 5px;
font-weight: bold;
color: white;
cursor: pointer;
}
.joinBtn:active {
box-shadow: 2px 2px 5px #fc894d;
}
<p>当チャンネルを契約されますか?</p>
<button class="joinBtn">契約する</button>
:active 擬似クラスは、よく <a> および <button> 要素で使われます。この擬似クラスで他のよくあるターゲットとしては、アクティブ化される要素を含む要素や、関連付けられた <label> 要素を通してアクティブ化されるフォーム要素です。
:active 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス (:link、:hover、 :visited)によって上書きされます。適切にリンクにスタイルを適用するには、 LVHA 順: :link — :visited — :hover — :active で定義されるように、他のすべてのリンク関連ルールの後に :active ルールを置いてください。
メモ:
複数ボタンのマウスを使うシステムでは、 CSS は :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: #eeeeee;
}
結果
[フレーム]
フォーム要素をアクティブ化
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;
}
結果
[フレーム]
仕様書
| 仕様書 |
|---|
| HTML # selector-active |
| Selectors Level 4 # active-pseudo |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。