:activeとは
- ここで説明する:active とは次の語句からなるCSSの疑似クラスです。
- active
- 読み: アクティブ
意味: 活動的、能動的
:active疑似クラスの概要
この疑似クラスはセレクタに対応した要素がアクティブ化された時に指定したプロパティ値の一時的な変更を行います。
要素のアクティブ化とはユーザーがマウスで任意の要素をクリックしている間に発生する疑似的イベントのことです。 この場合クリックしているとはマウスの第一ボタンによるクリックのことであり、右手用のマウスでは左ボタンのクリックを指します。
構文
サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。
セレクター:active{プロパティ名: 設定値;}実機サンプルとサンプルコード
ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。
サンプルに使用するのはdiv要素です。 この要素に:active疑似クラスを使ってプロパティ値の一時的な変更を見てみたいと思います。
参考: 要素のアクティブの時を検知する
ここではサンプルとして要素をクリックしている間は要素の背景色がピンクに変更されるものを用意しました。 シンプルに background-color の変更のみでも良かったのですが、面白味に掛けるので transition によるプロパティ値の遷移も行ってみました。
div要素
div{
background-color: ##khaki;
transition: background-color 1s;
}
div:active{
background-color: ##pink;
}補足説明
:active疑似クラスは他の疑似クラスよりも後で記述することをお勧めします。