【:active擬似クラス】クリック中の要素のスタイル

:activeでは、その要素がユーザーの操作によってクリック(アクティブ)された状態の時にスタイルを適用する事ができます。 例えばa要素に対し:activeを指定した場合、ユーザーがリンク部分でマウスボタンをクリックしてから離すまでの間などにスタイルが適用されます。

また:activeをリンク部分で設定する場合は、「:link」「:visited」「:hover」の後に記述するようにします。 これはcssでは下に記述したものから優先して適用されるためで、:activeと他の疑似クラスを併せて使用する場合は必ず「:link」「:visited」「:hover」「:active」の順番で記述するようにして下さい。

他にも、カーソルがリンクに乗った時などのスタイルを指定したい場合は、下記の疑似クラスを併せて使用します。

※疑似クラスとは、スタイルを適用する対象を要素名や属性名でなく、要素の状態や特徴で分類するものです。 例えばマウスカーソルが要素に乗った時や要素がアクティブにされた時など、他のセレクタでは表せないような状態に対してスタイルを適用することが可能となります。

  • :link ……… 未訪問(キャッシュされていない)ページへのリンク部分のスタイル
  • :visited ……… 訪問済み(キャッシュされている)ページへのリンク部分のスタイル
  • :hover ……… マウスカーソルがその要素の上にある時のスタイル(まだアクティブでない時)
  • :active ……… マウスボタンを押した時のスタイル(要素をクリックし離すまで)
  • :focus ……… 要素にフォーカスが移った時のスタイル

※リンクに関する疑似クラス …… :link , :visited
※動的な疑似クラス …… :hover , :active , :focus

これらは、リンク部分に対してスタイルを適用させたい場合に使用され、通常はa要素に対して指定します。 ですが「#id名」や「.クラス名」を指定する事で、特定のリンク部分に対して他のスタイルを適用することもできます。

またリンクに関する疑似クラスと動的な疑似クラスをa要素に適用すると、リンクが設定されている要素の状態やリンク先への訪問状況に応じたスタイルを細かく指定することができるようになります。

書式

  • 要素名:active {プロパティ名:値;} ……… クリック中の要素に対してスタイルを適用する

※要素名には、「#id名」や「.クラス名」も指定できます

使用した時の例

/* 通常のリンクへの設定 */
a:link {color: #0000ff;}     /* 未訪問のリンクの色 */
a:visited {color: #9400D3;}  /* 訪問済みのリンクの色 */
a:hover {color: #fff; background: #0000FF;}  /* リンクにカーソルが乗っている時の色 */
a:active {color: #fff; background: #9400D3;} /* クリックした時のリンク色 */
  
/* 特定のクラスが指定されているリンクへの設定 */
a.sample:link {color: #0000ff;}     
a.sample:visited {color: #9400D3;}  
a.sample:hover {color: #fff; background: #0000FF;}    
a.sample:active {color: #fff; background: #9400D3;}
  
/* 特定のクラスに含まれているリンクへの設定 */
.sample1 a:link {color: #0000ff;} 
.sample1 a:visited {color: #9400D3;} 
.sample1 a:hover {color: #fff; background: #0000FF;}  
.sample1 a:active {color: #fff; background: #9400D3;}
<a href="/hp-web/">ホームページ作成</a><br />
<a class="sample" href="/hp-web/html-abc/">HTMLリファレンス</a>
<div class="sample1"><a href="/hp-web/css/">CSSリファレンス</a></div>

ブラウザ上の表示例

対応ブラウザなどのデータ

適用対象 クリック中の要素
対応ブラウザ Internet Explorer , Google Chrome , Firefox , Opera , Safari

関連情報