備忘録的プログラミングリファレンス

:link クラス

 :link クラスは、アンカーである<a>エレメントにおいて未訪問のリンクならば、設定されたスタイルを反映する擬似クラスです。

:link クラス
a:link {
  background-color: blue;
}
詳しくは Example を参照してください

 :link以外の似た疑似クラスに:visited:hover:activeがあります。
 これらの疑似クラスにはユーザーに対する反応が想定されています。 :linkは未訪問、:visitedは訪問済み、:hoverはエレメントの上をマウスポインターがある状態、:activeはクリックされた状態です。
 ユーザーに対する反応順として、:link —> :visited —> :hover —> :active と想定されており、 より右側の状態の設定が優先されます。:hoverの設定は:activeの設定で上書きされるということです。

ページ内 Index

構文(Syntax)

CSS

HTMLElement:link {
  style_propaties;
}

DOM ( JavaScript )

 疑似クラスはDOM ( JavaScript )から操作できません。

 スタイルのみの操作は擬似クラスを利用したほうが簡易です。

 JavaScriptからスタイルを設定することはできます。以下はその例です。

in HTML

<a id="example" href="#">リンク例です</a>

in JavaScript

document.getElementById("example").style.background="linear-gradient(transparent 70%, #8E8EFF 0%)";

Example

 :linkの例です。未訪問のリンク :link は青色、訪問済みは灰色、hover 時は下線のみが赤色、:active 時は全体が赤色で表示されます。

 backgroundプロパティに関しては:linkの設定が反映されるようです。