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

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

ITエンジニア特化の転職サイト！
自社内開発求人に強い【クラウドリンク】

先輩くん

年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ！

後輩ちゃん

100％自社内開発の求人だから、SESのように職場環境が変わらないのがいいね！

簡単30秒で無料登録！

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

本書情報

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

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

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

: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;
}