CSS の擬似クラスは、HTML 要素の状態や位置に基づいてスタイルを変更できる強力なツールです。まるで魔法の呪文のように、要素に特別な効果を与え、インタラクティブなデザインを実現します。
擬似クラスとは？
擬似クラスは、要素そのものに存在するものではなく、要素が満たす条件によって適用される仮想的なクラスです。例えば、マウスが要素の上に置かれたとき、要素がフォーカスされたとき、要素がリンクであるときなど、様々な条件によって擬似クラスが適用されます。
擬似クラスの例
:hover: マウスが要素の上に置かれたとき
:focus: 要素がフォーカスされたとき
:active: 要素がクリックされたとき
:link: 未訪問のリンク
:visited: 訪問済みのリンク
:first-child: 親要素の最初の子供要素
:last-child: 親要素の最後の子供要素
:nth-child(n): 親要素のn番目の子供要素
擬似クラスの使い方
擬似クラスはセレクタにコロン(:)で続けて記述します。
/* マウスが要素の上に置かれたとき、背景色を赤色にする */
a:hover {
background-color: red;
}
/* フォーカスされたとき、枠線を青色にする */
input:focus { border: 2px solid blue;
}
/* 親要素の最初の子供要素に太字を適用する */
p:first-child {
font-weight: bold;
擬似クラスの利点
コードの簡潔化: 擬似クラスを使用することで、要素の状態ごとに個別のクラスを定義する必要がなくなり、コードが簡潔になります。
インタラクティブなデザイン: 擬似クラスは、マウスの動きやフォーカスなどのイベントに反応してスタイルを変更することで、インタラクティブなデザインを実現します。
アクセシビリティの向上: 擬似クラスを使用して、フォーカス状態や訪問済み状態を視覚的に表現することで、アクセシビリティを向上させることができます。
擬似クラスは、CSS の強力な機能の一つです。 これらを活用することで、より魅力的でインタラクティブなウェブサイトを作成することができます。
