Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

  1. トップページ
  2. CSSプロパティ辞典
  3. 【CSSセレクタ】E:active

【CSSセレクタ】E:active

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

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

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

サンプルコード
div:active { color: red;} /* div要素がマウスクリックされている間だけ文字を赤色にします。 */
p:active { color: blue;} /* p要素がマウスクリックされている間だけ文字を青色にします。 */
p:active span { color: orange;} /* p要素がマウスクリックされている間だけ子要素のspan要素の文字をオレンジ色にします。 */
*:active { font-size: 20px;} /* 全ての要素がマウスクリックされている間だけ文字を大きくします。 */
ブラウザでの表示結果
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>

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。