Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

概要

リンクの訪問状態に基づいてスタイルを適用する疑似クラスです。:linkは未訪問のハイパーリンクに、:visitedは訪問済みのリンクにマッチします。:any-linkは訪問状態に関係なくすべてのリンクにマッチするため、リンクの基本スタイル設定に便利です。プライバシー保護のため:visitedで使用できるプロパティには制限があります。

対応ブラウザ

デスクトップ

Chrome 65+
Edge 79+
Safari 9+
Firefox 50+

モバイル

Chrome Android 65+
Safari iOS 9+
Firefox Android 50+

基本構文

CSS
:any-link {
  color: #0066cc;
}
:visited {
  color: #551a8b;
}
:link {
  text-decoration: underline;
}

実務での使いどころ

  • リンクの訪問状態別スタイリング

    未訪問リンクと訪問済みリンクに異なる色を適用し、ユーザーがどのページを既に閲覧したかを視覚的に示します。

注意点

  • :visitedではプライバシー保護のためcolor等の限られたプロパティのみ変更可能です。background-imageやborderなどは変更できません。

アクセシビリティ

  • リンクの色は周囲のテキストと十分なコントラスト差を持たせ、色以外の手段(下線など)でもリンクを識別できるようにしてください。