: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 の定義
勧告 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報