Link selectors
:any-link は CSS の擬似クラスセレクターで、訪問の有無とは独立したソースアンカーとして振る舞う要素を表します。言い換えれば、 href 属性を持つすべての <a> または <area> 要素を選択します。つまり、 :link または :visited に一致するすべての要素を選択します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 65 | 79 | 50 | 9 | 65 | 9 | |
not match link `:any-link` プライバシー: セレクターが `<link>` 要素と一致しません | 65 | 79 | 87 | 15 | 65 | 15 |
| `:リンク` | 1 | 12 | 1 | 1 | 18 | 3.2 |
not match link `:link` プライバシー: セレクターが `<link>` 要素と一致しません | 1 | 12 | 87 | 15 | 18 | 15 |
| `:訪問しました` | 1 | 12 | 1 | 1 | 18 | 1 |
not match link `:visited` プライバシー: セレクターが `<link>` 要素と一致しません | 1 | 12 | 87 | 15 | 18 | 15 |
privacy measures プライバシーのために「:visited」を使用してステートメント内で許可される CSS プロパティを制限する | 6 | 12 | 4 | 5 | 18 | 4.2 |
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (79)
注釈 2件
削除済み
- このバージョンで機能が削除されました (50)
対応条件
- ベンダープレフィックス付きで対応: -moz- (1)
注釈 3件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (3)
- ベンダープレフィックス付きで対応: -khtml- (1.2)
削除済み
- このバージョンで機能が削除されました (3)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (1)
基本構文
CSS
:any-link {
color: #0066cc;
}
:visited {
color: #551a8b;
}
:link {
text-decoration: underline;
}ライブデモ
実務での使いどころ
-
リンクの訪問状態別スタイリング
未訪問リンクと訪問済みリンクに異なる色を適用し、ユーザーがどのページを既に閲覧したかを視覚的に示します。
注意点
- :visitedではプライバシー保護のためcolor等の限られたプロパティのみ変更可能です。background-imageやborderなどは変更できません。
アクセシビリティ
- リンクの色は周囲のテキストと十分なコントラスト差を持たせ、色以外の手段（下線など）でもリンクを識別できるようにしてください。