a要素のリンクテキストの状態に合わせてスタイルを適用する方法

2020年8月22日2023年1月22日

この記事では、リンクテキストの状態に合わせてスタイルを適用するサンプルコードを載せています。

MEMO

わかりやすく背景色を変えるようにしています。

See the Pen
taga by shiakisudev (@shiakisu)
on CodePen.

CSS

/* デフォルト時 */
a{
  background-color:blue;
}
/* デフォルト時 */
a:link{
  background-color:blue;
}
/* リンク先訪問時 */
a:visited{
  background-color:pink;
}
/* マウスオーバー時 */
a:hover{
  background-color:green;
}
/* クリックしている状態の時 */
a:active{
  background-color:red;
}

注意

疑似クラスをこの順番で定義しないと意図したとおりにスタイルが適用されないので注意が必要です。

hover、active、focusを使う場合は以下の記事もご参照ください。