“:active”擬似クラス｜CSSセレクタ｜CSS－havin' a coffee break

＃

“:active”擬似クラス

“:active”擬似クラスはユーザーの操作によりアクティブ化されている要素を選択する擬似クラスです。

通常、パソコンでは要素をマウスでクリックしている間にこの状態になります。マウスのボタンが複数ある場合はメインのボタン(通常のマウスでは左のボタン)でクリックした場合のみが対象になります。

文書の記述言語によってはどの要素がアクティブ化できるのかを定義している場合があります。また、文書の記述言語によってはアクティブ化されている状態を判断する追加の方法を定義している場合があります。例えば、HTMLではラベル付け可能要素は関連付けられた“label”要素がアクティブ化されていればアクティブ化されていると判断されます。

要素の子孫要素がアクティブ化されている状態でも“:active”擬似クラスによって選択されます。

要素は“:any-link”擬似クラス、“:link”擬似クラス、“:visited”擬似クラス、“:hover”擬似クラス、“:focus”擬似クラス、“:active”擬似クラスなどの擬似クラスの中から複数の擬似クラスから同時に選択される場合があります。同じ要素に対して複数の擬似クラスを併用する場合にはスタイルが競合することがありますので、記述する順序に気を付ける必要があります。

＃

アクティブ化できる要素

HTMLでは以下の要素がアクティブ化可能と定義されています。

無効化されていない“button”要素
無効化されておらず、“type”属性の値が“submit”、“image”、“reset”、“button”のいずれかである“input”要素
“href”属性がある“a”要素
“href”属性がある“area”要素
“href”属性がある“link”要素
フォーカス可能な要素
ポインタ・デバイスで押下(マウスクリックやタッチ画面のロングタップなど)されている要素
子孫要素がアクティブ化されている要素
関連付けられた“label”要素がアクティブ化されているラベル付け可能要素

＃

使用例



textarea {


 border: solid 5px #00a381; /*■*/


}





textarea:hover {


 border: solid 5px #fabf14; /*■*/


}





textarea:focus {


 border: solid 5px #e198b4; /*■*/


}





textarea:active {


 border: solid 5px #93ca76; /*■*/


}