CSSの「未訪問・訪問済み」問題を一撃で解決する `:any-link` の正体
フロントエンドの現場で、CSSを書き続けていると必ず直面する「リンクのスタイル」問題。昔からの慣習で `:link` と `:visited` を別々に書いて、スタイルの継承に頭を悩ませた経験、君にもあるだろう？
「なぜか訪問済みのリンクだけ色が元に戻ってしまう」「リセットCSSのせいで意図しない挙動になる」。そんな泥臭いデバッグに時間を溶かすのはもう終わりにしよう。今日は、モダンCSSにおけるリンクスタイリングの決定版、`:any-link` について、その本質を叩き込む。
—
`:any-link` とは何か？
一言で言えば、`:link` と `:visited` を統合した究極のセレクタだ。
CSSの仕様上、かつては「未訪問リンク（`:link`）」と「訪問済みリンク（`:visited`）」を明確に分ける必要があった。しかし、実務においてその両方に全く同じデザインを適用したいケースが9割以上を占める。「じゃあなぜ分かれているんだ？」という話だが、これはブラウザ側のプライバシー保護の歴史と密接に関わっている。
`:any-link` は、HTMLの `href` 属性を持つ `` や `
` タグに対し、それが訪問済みだろうと未訪問だろうと、とにかく「リンク機能を持っている要素」を無条件に捕捉してくれる。なぜこれが「実務」で重宝されるのか
現場でよく見る「アンチパターン」がこれだ。
/ アンチパターン：重複して記述し、保守性を下げる /
a:link, a:visited {
color: #007bff;
text-decoration: none;
}
一見これで問題ないように見えるが、複雑なコンポーネント設計になると話が変わってくる。特定のクラスが付与された時の上書きや、CSS変数のスコープ管理において、`a:link, a:visited` と書くたびにセレクタの重みが増し、コードの記述量も増える。
`:any-link` を使えば、これが一行で済む。
/ ベストプラクティス：スッキリと、かつ強力に /
a:any-link {
color: var(–link-color);
text-decoration: underline;
}
これだけでいい。ブラウザ側も「ああ、リンクならどっちの状態でもこれを適用すればいいんだな」と瞬時に判断してくれる。
—
実務でそのまま使えるコード例
ただ単に「便利だよ」で終わらせないのが、俺たちの流儀だ。現場でよく使う「リンクのホバーエフェクト」と組み合わせた、クリーンな実装例を置いておく。
/ リンク要素の基本スタイルを定義 /
a:any-link {
/ CSS変数を使って、デザインの統一感を維持 /
color: var(–brand-primary, #2563eb);
text-decoration: none;
transition: color 0.2s ease-in-out;
}
/ ホバー時の挙動を制御 /
a:any-link:hover {
color: var(–brand-hover, #1e40af);
text-decoration: underline;
}
/
- 補足：もし「訪問済みだけ色を変えたい」という特殊な要件が
- 出た場合でも、:any-linkの下に:visitedを記述すれば
- セレクタの優先順位で自然と上書きできる。
/
a:visited {
color: #6b7280; / 訪問済みは少し落ち着いたグレーにするなど /
}
ブラウザの裏側で起きていること
少し深掘りしよう。ブラウザのレンダリングエンジン（BlinkやWebKitなど）は、`:visited` の取り扱いには非常に神経質だ。なぜなら、サイト側がCSS経由でユーザーの閲覧履歴を不正に取得することを防ぐ必要があるからだ。
そのため、`:visited` に適用できるプロパティは `color` や `background-color` など、極めて限定的だ。`:any-link` はこの制約を魔法のように回避するものではなく、あくまで「両方の状態を一度に指定できる」というセレクタの糖衣構文（シンタックスシュガー）であると理解してほしい。
まとめ：明日からの君へ
フロントエンドのコードにおいて「DRY（Don’t Repeat Yourself）」は鉄則だ。`a:link, a:visited` と二回書くことは、二回メンテナンスのリスクを抱えることと同義だ。
`:any-link` を使いこなすことは、単にコードを短くするためだけじゃない。「この要素はリンクである」という事実を、コード上でたった一つの宣言として定義するという、アーキテクトとしての心構えなんだ。
明日から、君のプロジェクトのベーススタイルから `a:link, a:visited` を探し出して、`:any-link` に書き換えてみてくれ。それだけで、君のCSSは一歩、洗練されたものになるはずだ。
何か詰まったら、いつでも聞いてくれ。現場からは以上だ。
コメント