CSS:link 疑似クラスは、まだ訪問されていない要素を表します。 <a>, <area>, <link> など、 href 属性を持つ未訪問のすべての要素を選択します。

/* 未訪問の <a> をすべて選択します */
a:link {
  color: red;
}

:link 疑似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の疑似クラス (:active:hover:visited)によって上書きされます。適切にリンクにスタイルを適用するには、 LVHA 順: :link:visited:hover:active で定義されるように、他のすべてのリンク関連規則の前に :link 規則を置いてください。

メモ: 訪問済みかどうかにかかわらず要素を選択するには、 :any-link を使用してください。

構文

:link

既定では、大半のブラウザーが訪問済みのリンクに特殊な color の値を適用しています。そのため、この例のリンクは訪問前でしか特殊な文字色にならないでしょう(よって、再度確認するにはブラウザーの履歴をクリアする必要があるでしょう)。しかし、 background-color の値は大半のブラウザーが既定で訪問済みのリンクに設定していないので残るでしょう。

HTML

<a href="#ordinary-target">これは普通のリンクです。</a><br>
<a href="">このリンクを訪問しました。</a><br>
<a>リンクのプレイスホルダー(スタイルの適用なし)</a>

CSS

a:link {
  background-color: gold;
  color: green;
}

結果

仕様書

仕様書 策定状況 コメント
HTML Living Standard
:link の定義
現行の標準  
Selectors Level 4
:link の定義
草案 変更なし。
Selectors Level 3
:link の定義
勧告 変更なし。
CSS Level 2 (Revision 1)
:link の定義
勧告 <a> 要素に適用する場合のみ制約を緩和。
CSS Level 1
:link の定義
勧告 初回定義。

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 1.5Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android ? Safari iOS 完全対応 3.2Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報

ドキュメントのタグと貢献者

このページの貢献者: ryosuke0920, mfuji09, ethertank, sosleepy
最終更新者: ryosuke0920,