本記事では、CSSの擬似クラス:link、:visited、:hover、:focus、:activeの使い方についてまとめています。
ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】
HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
: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;
}