first-child、last-child、 CSSの擬似クラスについて紹介

2021-02-18

メモも兼ねてCSSの擬似クラス4つをまとめたいと思います。

擬似クラスを活用することでデザインの幅が広がるので、ぜひ参考にしてみてください。

CSSの擬似クラスとは？

CSSの擬似クラスについてMDNでは以下のような説明がされています。

CSS の疑似クラスはセレクターに付加するキーワードであり、選択された要素対して特定の状態を指定します。例えば :hover 疑似クラスで、ユーザーがマウスポインタを当てたときにボタンの色を変更することができます。

少し内容が難しいですね。各用語をまずは抑えてみましょう。

セレクターとはCSSを適用させたいHTMLを指定させたものです。文章にすると少し難しい気もしますが、Web制作をやったことがある人なら誰でも知っているものです。

p { color:red; }
セレクタ{ プロパティ:値; }

ここではpタグの文字入りを指定しているのですが、まさにpの部分がセレクタですね。

CSSを適用させたいHTML(pタグ)を指定させたもの。ここでは文字色を赤にするように指定しています。

色指定のcolor:がプロパティ、実際どんな色にするのか？→red; これが値と呼ばれる部分になります。

ここでもう一度、先ほどの引用文を見てみましょう。

CSS の疑似クラスはセレクターに付加するキーワードであり、選択された要素対して特定の状態を指定します。

セレクターの部分をpタグと読み替えると分かりやすいかもしれません。

話しが逸れてしまいましたが、擬似クラスには様々なものがあります。先ほどはマウスを乗った時になんらかの変化を指定する:hoverを紹介しましたが、ここからは本題の擬似クラスを紹介していきます。

first-childは、1番最初の要素に別でデザインを指定することができます。

例えばリストの記述で、最初の要素だけ文字色を変更したり大きさを変えたりしたいとします。

これはfirs-childを適用することで簡単に実行することができます。

次にlast-childについての説明を。これはfirst-childの逆ですね。

つまり、最後の要素に対しての特別な指定をすることができます。