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ユーザーアクション擬似クラス

visited 擬似クラスThe visited pseudo-class

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

visited擬似クラスは訪問済みリンクのスタイルを指定するセレクタです。対して未訪問のリンクのスタイルはlink擬似クラスを用います。リンクの訪問履歴はブラウザキャッシュやクッキーに保存されるため、これらを消去するとリンク状態が初期化される場合があります。

擬似クラスの書式

visited擬似クラスは、href属性を持つアンカー(a要素)にしかマッチしないので、次の書式はいずれも同じ意味を持ちます。また、linkとvisited擬似クラスに限っては排他的な関係にあるため同時に指定することができませんが、linkとactiveまたはvisitedとactiveは共存が可能です。

:visited		{ ... }		全てのa要素
*:visited		{ ... }		全てのa要素
a:visited		{ ... }		全てのa要素
a[href]:visited		{ ... }		全ての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.