:visited
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
:visited
は CSS の擬似クラスで、ユーザーが訪問したことがあるリンクに適用されます。プライバシー上の理由から、このセレクターを使用して変更できるスタイルはとても限定されています。 :visited
擬似クラスは href
属性を持つ <a>
と <area>
要素にのみ適用されます。
試してみましょう
プライバシー上の制約
プライバシー上の理由から、ブラウザ―はこの擬似クラスを使って適用できるスタイルに厳しい制限をかけています。使い方は以下の通りです。
- 利用できる 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
でない状態のアルファ成分が代わりに使用されます。Firefox でアルファ成分が0
の場合、:visited
で設定したスタイルは完全に無視されます。 - これらのスタイルはエンドユーザーに対する表示色を変更できるようになっていますが、
window.getComputedStyle
メソッドは嘘をつき、:visited
状態ではない色の値を返します。 <link>
要素は:visited
に一致することはありません。
メモ: これらの制限とその理由については、プライバシーと :visited セレクターを参照してください。
構文
css
: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