Link selectors
リンクの訪問状態に基づいてスタイルを適用する疑似クラスです。:linkは未訪問のハイパーリンクに、:visitedは訪問済みのリンクにマッチします。:any-linkは訪問状態に関係なくすべてのリンクにマッチするため、リンクの基本スタイル設定に便利です。プライバシー保護のため:visitedで使用できるプロパティには制限があります。
概要
リンクの訪問状態に基づいてスタイルを適用する疑似クラスです。: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などは変更できません。
アクセシビリティ
- リンクの色は周囲のテキストと十分なコントラスト差を持たせ、色以外の手段(下線など)でもリンクを識別できるようにしてください。