こんにちは！フロントエンドの現場で長年CSSと格闘してきたアーキテクトです。
CSSを学び始めると、誰もが一度は「あれ、なんでリンクの色が変わらないんだっけ？」「`:link` と `:visited` って別々に書くの面倒くさいな……」と頭を抱える瞬間がありますよね。
今回は、そんな地味だけど知っておくと魔法のようにコードがスッキリする、`:any-link` という擬似クラスについてお話しします。これ、知っているだけで日々のコーディングが本当に楽になりますよ。
—
リンクの「訪問済み問題」に悩まされていませんか？
Webサイトを作っていると、リンクの色を指定したくなる場面は必ず訪れます。
昔からのCSSのルールでは、リンクには「未訪問（まだクリックしていない）」と「訪問済み（一度見たことがある）」の2つの状態があって、それぞれ別々に色を指定するのが一般的でした。
/ 未訪問のリンク /
a:link { color: blue; }
/ 訪問済みのリンク /
a:visited { color: purple; }
でも、最近のモダンなWebデザインでは、「訪問したかどうかで色を変える必要なんてない！ 常にブランドカラーで統一したいんだ！」というケースがほとんどですよね。そんな時、わざわざ2行書くのはちょっと手間だし、忘れ物もしやすい。
そこで登場するのが、`:any-link` です。
—
`:any-link` は「とりあえずリンクなら全部！」という頼れる相棒
`:any-link` を一言で言うと、「未訪問だろうが訪問済みだろうが、リンク機能を持った要素なら全部まとめて面倒見るよ！」という、とてもおおらかな擬似クラスです。
イメージとしては、「お買い物に来たお客さん」を想像してください。
「まだお店に入ったことのないお客さん」も「何度か来店したことのある常連さん」も、お店にとっては同じ「大切なお客さん」ですよね。`:any-link` は、その全員を一括で「お客さん」として選んでくれる魔法のタグなんです。
実際に書いてみましょう
これまでの面倒な記述を、こんなにシンプルに書き直せます。
/ どの状態のリンクであっても、一括でデザインを適用します /
:any-link {
color: #ff4500; / 情熱的なオレンジ色にしてみましょう /
text-decoration: none; / 下線を消すのも簡単 /
font-weight: bold; / 太字にして目立たせます /
}
/ リンクの上にマウスを乗せた時だけ変えたいなら、これまで通り :hover を足すだけ！ /
:any-link:hover {
color: #ff8c00;
text-decoration: underline;
}
どうでしょう？ `a:link` と `a:visited` を別々に書いていた頃に比べて、コードがとてもスッキリしましたよね。
—
なぜ `:any-link` を使うべきなのか？
初学者の方がこのプロパティを覚えるべき理由は、単に「楽だから」だけではありません。
1. 書き忘れを防げる（ヒューマンエラーの削減）
`a:link` だけ書いて `a:visited` を忘れると、ユーザーが一度ページを訪れた瞬間にデザインが崩れる……なんて事故がよくあります。`:any-link` ならその心配がゼロです。
2. デザインの統一感が保てる
「訪問済みだから色が変わって見にくい」といった意図しないデザイン崩れを未然に防ぎ、サイトのクオリティを高く維持できます。
3. 「今の自分」に集中できる
CSSを書く時間は、ユーザー体験を考えるための時間です。些細な状態管理に頭を使うより、どうすればユーザーがクリックしやすいボタンになるか、といった本質的なことに脳のメモリを使ってください。
—
最後に：つまずいても大丈夫！
もし、皆さんが書いたコードで「あれ？色が変わらないな？」と思ったら、それはきっと `:any-link` のせいではなく、CSSの優先順位（詳細度）のせいです。
ブラウザの標準スタイルが邪魔をしていることもあるので、そんな時は「あ、今はブラウザくんが頑張って調整してくれているんだな」と優しく受け止めてあげてください。一つずつ確認していけば、必ず解決できます。
CSSは、一度理解してしまえば、こんな風に皆さんを助けてくれる力強い味方になります。まずはこの `:any-link` から、快適なコーディングライフを始めてみてくださいね。
皆さんの作るWebサイトが、たくさんの人に愛されますように。応援しています！
コメント