CSS セレクタ ':any-link' で訪問済みと未訪問のリンクを統一する

:any-link は CSS の擬似クラスセレクタで、訪問済みかどうかにかかわらず、すべてのリンク要素にスタイルを適用するために使用されます。つまり、<a> または <area> 要素で href 属性を持つ要素すべてが対象となります。

利点

:any-link を使用する利点は次のとおりです。

将来の変更への柔軟性: 将来、訪問済みのリンクを区別する必要が生じた場合でも、:visited セレクタを追加するだけで済みます。
一貫したスタイル: 訪問済みと未訪問のリンクに統一したスタイルを適用したい場合に便利です。
コードの簡潔化: :link と :visited を別々に記述する必要がなくなり、コードが読みやすくなり、メンテナンスがしやすくなります。

構文

:any-link セレクタの構文は次のとおりです。

a:any-link {
  /* スタイル定義 */
}

上記のように、:any-link は <a> 要素に対してのみ使用できます。他の要素に適用したい場合は、適切な要素セレクタと組み合わせて使用する必要があります。

例

以下の例は、:any-link を使用して、すべてのリンクに緑色のテキストと下線を設定する方法を示しています。

a:any-link {
  color: green;
  text-decoration: underline;
}

注意点

:any-link は比較的新しいセレクタであり、すべてのブラウザで完全にサポートされているわけではありません。古いブラウザとの互換性を考慮する必要がある場合は、:link と :visited を別々に使用する方が安全です。

:any-link セレクタは、擬似要素 :hover や :focus と組み合わせて使用することもできます。例えば、以下のコードは、マウスホバー時にすべてのリンクの背景色を青色に変更します。

a:any-link:hover {
  background-color: blue;
}

:any-link セレクタは、訪問済みと未訪問のリンクを区別せずに、すべてのリンクにスタイルを適用したい場合に便利なツールです。コードを簡潔化し、メンテナンスを容易にし、将来の変更にも柔軟に対応することができます。

a:any-link {
  color: green;
  text-decoration: underline;
}

擬似要素との組み合わせ

以下のコードは、:any-link セレクタと :hover 擬似要素を組み合わせて、マウスホバー時にすべてのリンクの背景色を青色に変更します。

a:any-link:hover {
  background-color: blue;
}

属性セレクタとの組み合わせ

以下のコードは、:any-link セレクタと属性セレクタを組み合わせて、特定のクラスを持つすべてのリンクにスタイルを適用します。

.important a:any-link {
  font-weight: bold;
}

ナビゲーションメニューの例

以下のコードは、ナビゲーションメニューのリンクにスタイルを適用する例です。未訪問のリンクは青色、訪問済みのリンクは紫色に設定します。

nav a:any-link {
  color: blue;
  text-decoration: none;
}

nav a:visited {
  color: purple;
}

コードを書く前に、:any-link セレクタがすべてのブラウザでサポートされていることを確認してください。
ご自身のニーズに合わせて、自由にカスタマイズしてください。
上記の例はほんの一例であり、:any-link セレクタを使用して様々なスタイルを適用することができます。

:link と :visited の組み合わせ

従来の方法では、:link と :visited をそれぞれ使用して、訪問済みと未訪問のリンクにスタイルを適用していました。

a:link {
  /* 未訪問のリンクのスタイル */
}

a:visited {
  /* 訪問済みのリンクのスタイル */
}

この方法は、すべてのブラウザでサポートされており、シンプルで分かりやすいという利点があります。

JavaScript による判定

JavaScript を使用して、訪問済みかどうかを判定し、それに応じてスタイルを切り替える方法もあります。

const links = document.querySelectorAll('a');

for (const link of links) {
  if (link.visited) {
    // 訪問済みのリンク
    link.style.color = 'purple';
  } else {
    // 未訪問のリンク
    link.style.color = 'blue';
  }
}

この方法は、より柔軟な制御が可能ですが、JavaScript の知識が必要となります。

ライブラリの使用

CSS Modules や SASS などの CSS ライブラリの中には、:any-link のような機能を提供するものがあります。これらのライブラリを使用することで、古いブラウザとの互換性を保ちながら、:any-link と同様のスタイルを適用することができます。

属性セレクタの使用

特定の属性を持つリンクのみを対象とする場合は、属性セレクタを使用してスタイルを適用することができます。

a[href^="#"] {
  /* # で始まるアンカーを持つリンクのスタイル */
}

a[href*=".pdf"] {
  /* .pdf で終わる拡張子を持つリンクのスタイル */
}

この方法は、:any-link ほど汎用性はありませんが、より具体的なスタイルを適用したい場合に有効です。

:any-link は便利なセレクタですが、古いブラウザとの互換性を考慮する必要がある場合や、より汎用的な方法を求めている場合は、上記の代替方法を検討することをお勧めします。