Caution

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

CSSプロパティ辞典

トップページ
CSSプロパティ辞典
【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系標準ブラウザ

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

トップページへ