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

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

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

本書情報

著者	Mana
発売日	2019/3/16
ページ数	280ページ
Kindle版	○
レビュー (Amazon)	(1,654件)

１冊ですべて身につくＨＴＭＬ＆ＣＳＳとＷｅｂデザイン入門講座 /ＳＢクリエイティブ/Ｍａｎａ

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

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

動画情報

作成者	たにぐち まこと
学習時間	9時間
受講者数	43,706人
レビュー	(9,232件)

動画の詳細はこちら

:linkの使い方

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

a:link{
  color:red;
}

:visitedの使い方

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

a:visited{
  color:yellow;
}

:hoverの使い方

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

a:hover{
  color:purple;
}

:focusの使い方

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

a:focus{
  color:green;
}

:activeの使い方

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

a:active{
  color:cadetblue;
}