: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.

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

試してみましょう

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

プライバシー上の制約

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

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

構文

css
:visited {
  /* ... */
}

色を持っていないか透過のプロパティは、 :visited で変更することができません。この擬似クラスで設定するプロパティについては、ブラウザーが持っている既定値は colorcolumn-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
# selector-visited
Selectors Level 4
# visited-pseudo

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:visited
:visited privacy: selector does not match <link> elements
Restrict CSS properties allowed in a statement using :visited for privacy

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報