Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

CSS辞典

トップページ
CSS辞典
【CSSセレクタ】E:active

【CSSセレクタ】E:active

『セレクタ:active』で、要素に対してマウスクリックされている間だけに適用できます。こちらは一般に『擬似クラス』(:active擬似クラス)と呼ばれます。スマホでは機種によってタッチしてる間は反応したりすることがありますが、機種によりけりなので使用を避けたほうが無難です。

対象となる要素にマウスクリックされている間だけにCSSスタイルが当たり、クリックが終了されたら元のスタイルに戻ります。そのほかに『tab』キーを使って要素を選択している間もスタイルが当たります。

尚、他の擬似クラスに上書きされる可能性がありますので、記述する順番にご注意ください。『:link』、『:visited』、『:hover』、『:active』の順番(『LVHA』の順)で記述するとバッティングせずにスタイルを適用させることができます。

サンプルコード

style.css

div:active { color: red;} /* div要素がマウスクリックされている間だけ文字を赤色にします。 */
p:active { color: blue;} /* p要素がマウスクリックされている間だけ文字を青色にします。 */
p:active span { color: orange;} /* p要素がマウスクリックされている間だけ子要素のspan要素の文字をオレンジ色にします。 */
*:active { font-size: 20px;} /* 全ての要素がマウスクリックされている間だけ文字を大きくします。 */

/* ボタンのクリック時に押し込まれた感を出す実践例 */
button:active { background-color: #0055aa; transform: translateY(2px); box-shadow: none;}

/* ナビゲーションリンクのクリック中の色変化 */
nav a:active { color: #ff6600; text-decoration: underline;}

/* :link → :visited → :hover → :active の順で記述する（LVHA順） */
a:link    { color: blue;}
a:visited { color: purple;}
a:hover   { color: red;}
a:active  { color: orange;}

ブラウザでの表示結果

div:active { color: red;} /* div要素がマウスクリックされている間だけ文字を赤色にします。 */
p:active { color: blue;} /* p要素がマウスクリックされている間だけ文字を青色にします。 */
p:active span { color: orange;} /* p要素がマウスクリックされている間だけ子要素のspan要素の文字をオレンジ色にします。 */
*:active { font-size: 20px;} /* 全ての要素がマウスクリックされている間だけ文字を大きくします。 */

<div>ここはdiv要素です。</div>
<p>ここはp要素です。</p>
<p>ここはp要素です。<span>ここはp要素の子要素のspan要素です。</span></p>

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

5 以降 ○

4 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android