:visited
:visited
は CSS の擬似クラスで、ユーザーがすでに訪問したリンクを表します。プライバシー上の理由から、このセレクターを使用して変更できるスタイルはとても限定されています。
css
/* 訪問済みの <a> をすべて選択 */
a:visited {
color: green;
}
:visited
擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス (:link
, :hover
, :active
) によって上書きされます。適切にリンクにスタイルを適用するには、 :visited
ルールを :link
ルールの後、 :hover
および :active
ルールの前に置いてください。 LVHA 順、 :link
— :visited
— :hover
— :active
と定義されています。
スタイル適用の制約
プライバシー上の理由から、ブラウザ―はこの擬似クラスを使って適用できるスタイルに厳しい制限をかけています。使い方は以下の通りです。
- 利用できる CSS プロパティは、
color
,background-color
,border-color
,border-bottom-color
,border-left-color
,border-right-color
,border-top-color
,column-rule-color
,outline-color
,text-decoration-color
,text-emphasis-color
です。 - 利用できる SVG 属性は
fill
とstroke
です。 - 利用できるスタイルでもアルファチャンネルは無視されます。アルファチャンネルは要素の
:visited
状態ではないものが代わりに使用されますが、アルファチャンネルが0
であった場合は、:visited
で設定されたスタイルセットは全体的に無視されます。 - これらのスタイルはエンドユーザーに対する表示色を変更できるようになっていますが、
window.getComputedStyle
メソッドは嘘をつき、:visited
状態ではない色の値を返します。 <link>
要素は:visited
に一致することはありません。
メモ: これらの制限とその理由については、プライバシーと :visited セレクターを参照してください。
構文
visited
例
色を持っていないか透過のプロパティは、 :visited
で変更することができません。この擬似クラスで設定するプロパティについては、ブラウザーが持っている既定値は color
と column-rule-color
だけでしょう。そのため、他のプロパティを変更したい場合は、 :visited
セレクターの外で基本的な値を設定する必要があります。
HTML
html
<a href="#test-visited-link">このリンクを訪問しましたか?</a><br />
<a href="">このリンクはすでに訪問済みです。</a>
CSS
css
a {
/* 該当するプロパティに不透過の既定値を設定することで、
:visited 状態のスタイルを定義できるようにします */
background-color: white;
border: 1px solid white;
}
a:visited {
background-color: yellow;
border-color: hotpink;
color: hotpink;
}
結果
仕様書
Specification |
---|
HTML Standard # selector-visited |
Selectors Level 4 # link |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- プライバシーと :visited セレクター
- リンク関連の擬似クラス:
:link
,:active
,:hover