【CSS Modules】:local-link疑似クラスの使い方
:local-link疑似クラスの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
:local-linkクラスは、現在のドキュメントと同じオリジン（スキーム、ホスト、ポート）を指すハイパーリンク要素を表す疑似クラスです。この疑似クラスを使用することで、ウェブページ内のリンクが同じウェブサイト内のコンテンツを指しているかをCSSで判別し、異なるスタイルを適用できます。これにより、ユーザーは内部リンクと外部リンクを視覚的に区別しやすくなります。
具体的には、<a href="...">要素のhref属性値が、現在のページのURLとスキーム、ホスト、ポートがすべて一致する場合に:local-linkにマッチします。例えば、https://www.example.com/というページから/aboutや#topへのリンクがこれに該当します。異なるサブドメイン（例：sub.example.com）や異なるプロトコル（例：httpとhttps）のリンクは、同じドメインであっても:local-linkにはマッチしません。
この疑似クラスは、ナビゲーションメニューでサイト内のリンクを強調したり、外部サイトへのリンクと区別して警告アイコンを付けたりする際に非常に便利です。ウェブサイトのユーザビリティや一貫性を向上させるため、内部リンクと外部リンクのスタイルを明確に分離する手法として活用できます。なお、リンク先が新しいタブで開かれるかどうか（target="_blank"属性の有無）は、:local-linkのマッチングには影響を与えず、あくまでオリジンの一致が基準となります。
公式リファレンス: :local-link
構文(syntax)
1a:local-link { 2 color: blue; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません