:visited

:visitedCSS擬似クラスで、ユーザーがすでに訪問したリンクを表します。プライバシー上の理由から、このセレクターを使用して変更できるスタイルはとても限定されています。

/* 訪問済みの <a> をすべて選択 */
a:visited {
  color: green;
}

:visited 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス (:link, :hover, :active) によって上書きされます。適切にリンクにスタイルを適用するには、 :visited ルールを :link ルールの後、 :hover および :active ルールの前に置いてください。 LVHA 順:link:visited:hover:active と定義されています。

スタイル適用の制約

プライバシー上の理由から、ブラウザ―はこの擬似クラスを使って適用できるスタイルに厳しい制限をかけています。使い方は以下の通りです。

メモ: これらの制限とその理由については、プライバシーと :visited セレクターを参照してください。

構文

:visited

色を持っていないか透過のプロパティは、 :visited で変更することができません。この擬似クラスで設定するプロパティについては、ブラウザーが持っている既定値は colorcolumn-rule-color だけでしょう。そのため、他のプロパティを変更したい場合は、 :visited セレクターの外で基本的な値を設定する必要があります。

HTML

<a href="#test-visited-link">このリンクを訪問しましたか?</a><br>
<a href="">このリンクはすでに訪問済みです。</a>

CSS

a {
  /* 該当するプロパティに不透過の既定値を設定することで、
     :visited 状態のスタイルを定義できるようにします */
  background-color: white;
  border: 1px solid white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}

結果

仕様書

仕様書 状態 備考
HTML Living Standard
:visited の定義
現行の標準
Selectors Level 4
:visited の定義
草案 変更なし。
Selectors Level 3
:visited の定義
勧告 変更なし。
CSS Level 2 (Revision 1)
:visited の定義
勧告 <a> 要素に適用する場合のみ制約を緩和。プライバシーを理由とするブラウザーの振る舞いの制限をかけた。
CSS Level 1
:visited の定義
勧告 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:visitedChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 4.4Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
:visited no longer matches <link> elementsChrome 完全対応 1
補足
完全対応 1
補足
補足 Chromium has never matched <link> elements with link pseudo-classes.
Edge 完全対応 12Firefox 完全対応 70IE 未対応 なしOpera 完全対応 15
補足
完全対応 15
補足
補足 Chromium has never matched <link> elements with link pseudo-classes.
Safari 完全対応 12WebView Android 完全対応 4.4
補足
完全対応 4.4
補足
補足 Chromium has never matched <link> elements with link pseudo-classes.
Chrome Android 完全対応 18
補足
完全対応 18
補足
補足 Chromium has never matched <link> elements with link pseudo-classes.
Firefox Android 未対応 なしOpera Android 完全対応 14
補足
完全対応 14
補足
補足 Chromium has never matched <link> elements with link pseudo-classes.
Safari iOS 完全対応 12Samsung Internet Android 完全対応 1.0
補足
完全対応 1.0
補足
補足 Chromium has never matched <link> elements with link pseudo-classes.
Restrict CSS properties allowed in a statement using :visited for privacyChrome 完全対応 6Edge 完全対応 12Firefox 完全対応 4IE 完全対応 8Opera 完全対応 15Safari 完全対応 5WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 4.2Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報