CSS3スタイル虎の巻

:link疑似クラス

:linkは、未訪問のリンクのスタイルを指定する疑似クラスです。

解説

基本的にaタグと合わせて使用します。
また、リンクに関する以下4種類の疑似クラスと同時に使われることが多いです。

  • :link:未訪問のリンクのスタイルを指定する
  • :visited:アクセス済みのリンクのスタイルを指定する
  • :hover:カーソルを乗せた時のリンクのスタイルを指定する
  • :active:クリック中のリンクのスタイルを指定する

構文

構文は以下になります。

要素:link

要素の箇所はHTMLタグが入りますが、基本的にaタグになります。

サンプル

aタグに疑似クラスを設定する


/* 未アクセスリンク⇒青 */
a:link {color:#0000ff;}

/* アクセス済みリンク⇒赤 */
a:visited {color:#ff0000;}

/* カーソルが乗っているリンク⇒黄色 */
a:hover {color:#ffff00f;}

/* 押下中のリンク⇒緑 */
a:active {color:#00ff00;}


<a href="tanuki.html">たぬき</a>

備考

  • :link、:visited、:hover、:active を定義するときは、この順序で指定してください。

関連項目

  • :link:未訪問のリンクのスタイルを指定する
  • :visited:アクセス済みのリンクのスタイルを指定する
  • :hover:カーソルを乗せた時のリンクのスタイルを指定する
  • :active:クリック中のリンクのスタイルを指定する