:visited

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

:visited はCSS の擬似クラスで、ユーザーが訪問したことがあるリンクに適用されます。プライバシー上の理由から、このセレクターを使用して変更できるスタイルはとても限定されています。:visited 擬似クラスはhref 属性を持つ<a> と<area> 要素にのみ適用されます。

試してみましょう

p {  font-weight: bold;}a:visited {  color: forestgreen;  text-decoration-color: hotpink;}

<p>訪問した可能性のページのリスト:</p><ul>  <li>    <a href="https://developer.mozilla.org">MDN Web Docs</a>  </li>  <li>    <a href="https://www.youtube.com/">YouTube</a>  </li></ul><p>履歴にない可能性が高いページ:</p><ul>  <li>    <a href="https://developer.mozilla.org/missing-1">ランダムな MDN ページ</a>  </li>  <li>    <a href="https://example.com/missing-1">ランダムな例のページ</a>  </li></ul>

:visited および、未訪問を表す:link 擬似クラスで定義されたスタイルは、少なくとも同等の仕様を持つユーザー操作に関する擬似クラスで（:hover や:active）によって上書きされます。適切にリンクにスタイルを適用するには、:visited ルールを:link ルールの後、:hover および:active ルールの前に置いてください。LVHA 順、:link —:visited —:hover —:active と定義されています。:visited 擬似クラスと:link 擬似クラスは互いに排他的です。

プライバシー上の制約

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

利用できる 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 に一致することはありません。
CSS セレクターを介して要素と照合する DOM メソッド（querySelector() やquerySelectorAll() など）は、文書内に訪問済みのリンクがある場合でも、常に「空」の結果を返します。前述のメソッドの場合、これはそれぞれnull または空のNodeList になります。

メモ:これらの制限とその理由については、プライバシーと :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;}