未経験からエンジニアになりたい人必見!
おすすめプログラミングスクール3選!

【CSS】擬似クラス:link、:visited、:hover、:focus、:activeの使い方

本記事では、CSSの擬似クラス:link、:visited、:hover、:focus、:activeの使い方についてまとめています。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

作成者たにぐち まこと
学習時間9時間
受講者数42,075人
レビュー (8,925件)

:linkの使い方

:linkの擬似クラスは、リンクのデフォルト状態(未訪問)のスタイルを指定します。

CSS
a:link{
  color:red;
}

▼実行結果

:visitedの使い方

:visitedの擬似クラスは、一度クリックされたリンク(訪問済み)のスタイルを指定します。

CSS
a:visited{
  color:yellow;
}

▼実行結果

:hoverの使い方

:hoverの擬似クラスは、マウスカーソルが要素に乗った際にスタイルを指定します。よくボタンにマウスカーソルを乗せると背景色が変わったりするものを見かけますよね。あれは:hoverの擬似クラスを使うことで実装することができます。

CSS
a:hover{
  color:purple;
}

▼実行結果

:focusの使い方

:focusの擬似クラスは、フォーカスがあたった要素にスタイルを適用します。

CSS
a:focus{
  color:green;
}

▼実行結果

:activeの使い方

:activeの擬似クラスは、ユーザーが要素をクリックしてから離すまでの状態にスタイルを適用します。

CSS
a:active{
  color:cadetblue;
}

▼実行結果