:active疑似クラス

:activeは、クリック中のリンクのスタイルを指定する疑似クラスです。

解説

クリック中とは、リンクをクリックしてマウスボタンを押し下げている間のことです。

基本的にaタグと合わせて使用します。
また、リンクに関する以下４種類の疑似クラスと同時に使われることが多いです。

• :link：未訪問のリンクのスタイルを指定する
• :visited：アクセス済みのリンクのスタイルを指定する
• :hover：カーソルを乗せた時のリンクのスタイルを指定する
• :active：クリック中のリンクのスタイルを指定する

構文

構文は以下になります。

要素の箇所はHTMLタグが入りますが、基本的にaタグになります。

サンプル

aタグに疑似クラスを設定する

/* 未アクセスリンク⇒青 */
a:link {color:#0000ff;}

/* アクセス済みリンク⇒赤 */
a:visited {color:#ff0000;}

/* カーソルが乗っているリンク⇒黄色 */
a:hover {color:#ffff00f;}

/* 押下中のリンク⇒緑 */
a:active {color:#00ff00;}

<a href="tanuki.html">たぬき</a>

備考

• :link、:visited、:hover、:active を定義するときは、この順序で指定してください。

関連項目

• :link：未訪問のリンクのスタイルを指定する
• :visited：アクセス済みのリンクのスタイルを指定する
• :hover：カーソルを乗せた時のリンクのスタイルを指定する
• :active：クリック中のリンクのスタイルを指定する

Tweet