:link

試してみましょう

p {
  font-weight: bold;
}

a:link {
  color: forestgreen;
  text-decoration-color: hotpink;
}

<p>Pages that you might have visited:</p>
<ul>
  <li>
    <a href="/proxy/developer.mozilla.org">MDN Web Docs</a>
  </li>
  <li>
    <a href="/proxy/www.youtube.com/">YouTube</a>
  </li>
</ul>
<p>Pages unlikely to be in your history:</p>
<ul>
  <li>
    <a href="/proxy/developer.mozilla.org/missing-2">Random MDN page</a>
  </li>
  <li>
    <a href="/proxy/example.com/missing-2">Random Example page</a>
  </li>
</ul>

:link および :visited 擬似クラスによって定義されたスタイルは、以降のユーザー操作の擬似クラス（:hover または :active）によって上書きされる可能性があります。適切にリンクにスタイルを適用するには、 :link ルールを他のすべてのリンク関連ルールの前に置き、 LVHA 順: :link — :visited — :hover — :active で定義されるようにしてください。 :visited 擬似クラスと :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;
}

結果

仕様書

ブラウザーの互換性

関連情報

• リンク関連の擬似クラス: :visited, :hover, :active