Simple HTMLHTMLリファレンス

Main Menu

おすすめリンク

Site Info.

HTMLリファレンス

CSSリファレンス

その他の記事

CSSリファレンス インデックス

スポンサーリンク

CSSリファレンス

擬似クラスPseudo-classesTOPCSSSelectorPseudo-class

  1. E:linkリンク擬似クラス
  2. E:visitedリンク擬似クラス
  3. E:lang(fr)言語擬似クラス
  4. E:first-child構造擬似クラス
  5. E:activeユーザーアクション擬似クラス
  6. E:focusユーザーアクション擬似クラス
  7. E:hoverユーザーアクション擬似クラス

active 擬似クラスThe user action pseudo-class

書式E:active個別性1
擬似クラスについて

active擬似クラスは訪問中を示すリンクのスタイルを指定するセレクタです。ユーザーの操作に依存するのでユーザーアクション擬似クラスとも呼ばれます。リンクの訪問履歴はブラウザキャッシュやクッキーに保存されるため、これらを消去するとリンク状態が初期化される場合があります。

擬似クラスの書式

active擬似クラスは、a要素に限らず任意の要素に対してマッチすることができます。また、linkとvisited擬似クラスに限っては排他的な関係にあるため同時に指定することができませんが、linkとactiveまたはvisitedとactiveは共存が可能です。

:active		{ ... }		全ての要素
*:active	{ ... }		全ての要素
E:active	{ ... }		任意のE要素
a[href]:active	{ ... }		任意のa要素
擬似クラスの記述順 [LVHA]

link、visited、hover、activeの4つの擬似クラスは、それぞれの個別性が同じであり、記述順序によってはうまく動作しない場合があります。 例えばhoverの後にvisitedを記述すると、後から記述したvisitedが上書きされるため、マウスオーバーした場合でもスタイルが変化しないといったケースです。 このような不具合を避けるために、擬似クラスはLVHA(link、visited、hover、activeの頭文字)の順序で記述するのが良いとされています。

a:link		{ color: blue; }	未訪問リンク
a:visited	{ color: purple; }	訪問済みリンク
a:hover		{ color: red; }		マウスオーバー時のリンク
a:active	{ color: yellow; }	アクティブ状態(訪問中)のリンク
スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.