本記事では、CSSの擬似クラス:link、:visited、:hover、:focus、:activeの使い方についてまとめています。
HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

メリット
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる


Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!



初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
全プログラマー必見!
変数名/関数名にもう悩まない!
変数名/関数名にもう悩まない!
リーダブルコード


メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)


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