CSSの「擬似クラス」（pseudo-class）は、特定の状態や条件に基づいて要素にスタイルを適用するために使用されます。擬似クラスは、特定のインタラクションや状態に応じて要素をスタイリングするのに非常に有用です。例えば、ユーザーがリンクをホバーした時、フォーカスした時、または特定の順番にある要素にスタイルを適用することができます。今回は、CSSで覚えておくべき5つの擬似クラスについて説明します。
1. :hover
:hover 擬似クラスは、ユーザーが要素の上にカーソルを重ねた時に適用されるスタイルを定義するために使われます。この擬似クラスは、リンクやボタンなど、インタラクティブな要素に特に便利です。
使用例:
このコードは、ユーザーがリンクの上にカーソルを置いたときに、リンクの色を赤に変え、下線を表示するものです。
2. :focus
:focus 擬似クラスは、フォームの入力フィールドやリンクなど、ユーザーが「フォーカス」を当てた要素にスタイルを適用するために使用されます。通常、フォームフィールドに文字を入力する時や、タブキーで移動した時に発生します。
使用例:
このコードは、フォームの入力フィールドにフォーカスが当たった時に、ボーダー色を青に、背景色を淡い黄色に変更します。
3. :nth-child()
:nth-child() 擬似クラスは、親要素内の特定の子要素にスタイルを適用するために使用されます。例えば、偶数番目のアイテム、奇数番目のアイテム、または特定のパターンに基づいたアイテムにスタイルを付けたい時に便利です。
使用例:
このコードは、リスト内の奇数番目のアイテムに灰色の背景色を適用します。
4. :first-child
:first-child 擬似クラスは、親要素の最初の子要素にスタイルを適用するために使用されます。これにより、特定の要素が親の最初の子要素である場合にスタイルを変更できます。
使用例:
このコードは、親要素の最初の
タグに太字のスタイルを適用します。
5. :last-child
:last-child 擬似クラスは、親要素の最後の子要素にスタイルを適用するために使用されます。この擬似クラスも、特定の要素が親の最後の子要素である場合にスタイルを変えるのに便利です。
使用例:
このコードは、リスト内の最後のアイテムの下にマージンを適用しないようにします。
まとめ
CSSの擬似クラスは、インタラクティブな要素や特定の状態に基づいてスタイルを動的に変更できる強力なツールです。:hover、:focus、:nth-child()、:first-child、:last-child などの擬似クラスを使うことで、より直感的でユーザーインタラクションに対応したデザインを作成することができます。これらを活用することで、Webサイトやアプリケーションのユーザー体験を大きく向上させることができます。