:link
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
試してみましょう
p {
font-weight: bold;
}
a:link {
color: forestgreen;
text-decoration-color: hotpink;
}
<p>Pages that you might have visited:</p>
<ul>
<li>
<a href="https://developer.mozilla.org">MDN Web Docs</a>
</li>
<li>
<a href="https://www.youtube.com/">YouTube</a>
</li>
</ul>
<p>Pages unlikely to be in your history:</p>
<ul>
<li>
<a href="https://developer.mozilla.org/missing-2">Random MDN page</a>
</li>
<li>
<a href="https://example.com/missing-2">Random Example page</a>
</li>
</ul>
:link
および :visited
擬似クラスによって定義されたスタイルは、以降のユーザー操作の擬似クラス(:hover
または :active
)によって上書きされる可能性があります。適切にリンクにスタイルを適用するには、 :link
ルールを他のすべてのリンク関連ルールの前に置き、 LVHA 順: :link
— :visited
— :hover
— :active
で定義されるようにしてください。 :visited
擬似クラスと :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;
}
結果
仕様書
Specification |
---|
HTML # selector-link |
Selectors Level 4 # link-pseudo |