Categories: HTML&CSS

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

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

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を使う場合は以下の記事もご参照ください。

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp