【CSS】aタグ リンクのクリック前後でスタイルを変える方法｜:linkと:visitedとは何か？使い方や注意点を実例で解説。フォントサイズ(font-size)や背景色(background)が変わらない時の対処法（初心者向け、わかりやすい）

HTMLでaタグを使ってリンクを作成するとデフォルトでは、クリック前にはテキストの下にアンダーラインがつき、クリック後に青色に変化するスタイルが適用されます。

このaタグで作成したリンクの色を変更するCSSとして「:link」と「:visited」が用意されています。

ここでは、「:link」と「:visited」の使い方や注意点を実例で解説しています。

:link, :visitedとは何か？

「:link」と「:visited」のどちらもリンク（aタグ）に使用する疑似クラスで、aタグのリンククリック前後でのスタイルを指定することができます。

:linkの使い方

「:link」はリンクをクリックする前のaタグのスタイルを指定します。

a:link { 処理 }

:visitedの使い方

「:visited」はリンクをクリックした後のaタグのスタイルを指定します。

a:visited { 処理 }

:linkと:visitedを使うメリット

通常aタグにスタイルを設定すると、リンクをクリックする前とした後でどちらも同じスタイルが適用されてしまいます。

:linkと:visitdを使うことで、クリック前の色とクリック後の色を明確に指定することができます。

:linkや:visited使用時の注意点

:linkや:visitedを使う時は以下に注意してください。

:visitedには使えないプロパティがある

:visitedで使えるプロパティはかなり制限されています。

font-size, font-weightといったプロパティは使用することができません。使えるのは文字色や背景色の変更といったプロパティです。

:visitedで背景色を指定するときは、aタグかa:linkに背景色が設定してある必要がある。

上記のプライバシーの保護上の理由から、:visitedのみで背景色や枠線の色などのプロパティを設定することができません。（見た目が大きく変わって、クリックしたことがあからさまになるため）

対象のaタグやa:linkなどでそれらのプロパティを用意しておく必要があります。

なお、:visitedがデフォルトで使えるプロパティは以下の２つです。

対象要素のプロパティが引き継がれる

:linkや:visitedで作成した疑似クラスには、対象要素のプロパティが引き継がれます。

例えば、「p:link」または「p:visited」としたときに、pタグに「color: red;」が指定してあれば、疑似クラスにも同じく「color: red;」が適用されます。

色を変えたい場合は、「p:link」または「p:visited」の中でcolorプロパティを指定する必要があります。

:linkや:visitedのスタイルが優先される

:visitedを使ってスタイルを指定した場合は、aタグに直接指定したスタイルが:link相当（リンククリック前）のスタイルとなります。

:linkを使ってスタイルを指定した場合は、aタグに直接指定したスタイルが:visited相当（リンククリック後）のスタイルとなります。

:linkと:visitedを併用した場合は、aタグのプロパティよりも:linkと:visitedのスタイルが優先されます。

:link,:visitedの実例

例えば、以下のようにページ内リンクがあるとします。

<a href="#jump">リンクテキスト</a>

CSSを適用しないデフォルトの状態では画面の表示は以下のようになっています。

このリンクをクリック前と、クリック後のスタイルを適用したい場合は以下のようにします。

なお、:linkと:visited、aタグへの直接のスタイル指定の組み合わせで、同じ処理でも複数の書き方があります。

a{
  color: gold;
}

a:visited{
  color: blue;
}

　　↑↓　同じ

a:link{
  color: gold;
}

a{
  color: blue;
}

　　↑↓　同じ

a:link{
  color: gold;
}

a:visited{
  color: blue;
}

すると画面の表示は以下のようになります。

　　↓ リンクをクリック

リンクのクリック前とクリック後で指定したスタイルが適用されていることがわかります。

実例：対象要素のプロパティの引継ぎと打ち消し

:linkと:visitedで作成した疑似クラスは、対象要素のプロパティを引き継ぎます。

例えば、以下のように「リンクテキスト」があるとします。

<a href="#jump">リンクテキスト</a>

a{
  color: red;
  font-size: 30px;
  font-weight: bold;
  text-decoration: underline;
}

ブラウザでの表示は以下のようになっています。

この要素に対して、:linkと:visitedを使って、クリック前後のスタイルを設定します。

a{
  color: red;
  font-size: 30px;
  font-weight: bold;
  text-decoration: underline;
}

a:link{
  color: gold;
  font-weight: normal
}

a:visited{
  color: cyan;
}

ブラウザの表示は以下のようになります。

　↓　リンクをクリック

下線や文字の太さなど、対象の要素のプロパティがそのまま引き継がれていることがわかります。

なお、a:linkで設定したプロパティも、a:visitedで上書きされない限り引き継がれます。

対象の要素のプロパティを打ち消したいときは、a:linkやa:visitedの中でそのプロパティを上書きする記述を書きます。

a{
  color: red;
  font-size: 30px;
  font-weight: bold;
  text-decoration: underline;
}

a:link{
  color: gold;
  font-size: 12px;
  font-weight: normal;
  text-decoration: none;
}

a:visited{
  color: cyan;
}

すると、画面の表示は以下のようになります。

　↓ リンクをクリック

a:linkで設定したプロパティが、a:visitedに引き継がれていることがわかります。

実例：背景色や枠線の色の指定は:visitedの外にプロパティが必要

:visitedはデフォルトでcolor, column-rule-colorプロパティのみしか使えません。

背景色を指定するbackground-colorや枠線を指定するborderも使うことができますが、それらを使うためには、aタグやa:linkでそのプロパティが事前に宣言されている必要があります。

例えば、以下のように「リンクテキスト」があるとします。

<a href="#jump">リンクテキスト</a>

:visitedでbackground-colorとborderを指定しています。

a:link{
  color: red;
  font-size: 30px;
  font-weight: bold;
  text-decoration: underline;
}

a:visited{
  color: cyan;
  background-color: pink;
  border: 3px green double; 
}

ブラウザでの表示は以下のようになっています。

　↓ クリックすると以下のようになります。

:visitedでbackground-colorとborderを指定している背景色や枠線が適用されません。

修正

a:linkにも:visitedで設定してあるbackground-colorとborderプロパティを指定します。

a:link{
  color: red;
  font-size: 30px;
  font-weight: bold;
  text-decoration: underline;
  background-color: yellow;
  border: 1px blue solid; 
}

a:visited{
  color: cyan;
  background-color: pink;
  border: 3px green double; 
}

クリック前の画面の表示は以下のようになります。

　↓　リンクをクリック

:visitedのbackground-colorとborderプロパティも適用されるようになりました。

実例 :visitedには使えないプロパティがある

:visitedでは使えるプロパティが限られています。

このため、font-size, font-weightなどのプロパティを使うことはできません。

例えば、以下のように「リンクテキスト」があるとします。

<a href="#jump">リンクテキスト</a>

:visitedでbackground-colorとborderを指定しています。

a:link{
  color: red;
  font-size: 30px;
  font-weight: bold;
  text-decoration: underline;
}

a:visited{
  color: cyan;
  font-size: 10px;
  font-weight: normal;
  text-decoration: none;
}

ブラウザでの表示は以下のようになっています。

　↓ クリックすると以下のようになります。

:visitedで指定しているcolorプロパティしか適用されていません。

font-size, font-weightなどのプロパティは無視されていることがわかります。