🔖

【CSS入門】:first-childなどの疑似クラスセレクタをわかりやすく解説

に公開
HTML
csss
tech

【CSS入門】:first-childなどの疑似クラスセレクタをわかりやすく解説

CSSを書くときによく見かける
:first-child, :last-child, :nth-child() といった記述。

どれも「特定の要素だけを選んでスタイルを当てる」ためのセレクタです。
この記事では、それぞれの意味や使い方をわかりやすく解説します。

🌿 疑似クラスとは？

**HTMLの状態や構造に応じてスタイルを当てるための“条件”**のようなものです。

たとえば、

a:hover { color: red; }

のように、マウスを乗せたときだけ赤くなるのも「疑似クラス」です。

🍀 :first-child（最初の子要素）

親要素の中で最初にある要素を選択します。

例：
html
コードをコピーする
<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>
css
コードをコピーする
li:first-child {
  color: red;
}
➡ 結果：最初の「りんご」だけ赤くなります。

🌸 :last-child（最後の子要素）

親要素の中で一番最後にある要素を選択します。

css
コードをコピーする
li:last-child {
  color: blue;
}
➡ 結果：最後の「ぶどう」だけ青くなります。

🌼 :nth-child(n)（n番目の子要素）
順番を指定して選択できるセレクタです。

css
コードをコピーする
li:nth-child(2) {
  color: green;
}
➡ 2番目の「みかん」だけ緑色になります。

🌀 :nth-child(odd) / :nth-child(even)

奇数・偶数の要素を選択できます。

css
コードをコピーする
li:nth-child(odd) {
  background-color: #f9f9f9;
}

li:nth-child(even) {
  background-color: #e0e0e0;
}
➡ リストの背景を交互に色分けできます。
テーブル行などでよく使われるテクニックです。

🌻 :first-of-type / :last-of-type

似たセレクタに「-of-type」系があります。
これは「タグの種類ごとに」最初や最後の要素を選びます。

html
コードをコピーする
<div>
  <p>最初の段落</p>
  <p>2番目の段落</p>
  <span>スパン</span>
</div>
css
コードをコピーする
p:first-of-type {
  color: red;
}
➡ <p> タグの中で最初のものだけにスタイルが当たります。
他のタグ（ここでは <span>）は無視されます。

🌸 :nth-of-type(n)

同じタグ名のうち、n番目の要素にスタイルを当てます。

css
コードをコピーする
p:nth-of-type(2) {
  color: orange;
}
➡ <p> のうち、2番目の段落だけオレンジになります。

🧩 :not()（特定の要素を除外）

指定した条件に当てはまらない要素を選択します。

css
コードをコピーする
li:not(:last-child) {
  border-bottom: 1px solid #ccc;
}
➡ 最後以外のリストに線を引けます（よく使われる実用的な例）。

🧠 まとめ表

セレクタ 意味 よく使う場面
:first-child 最初の子要素 リストやカードの1つ目
:last-child 最後の子要素 下線を除外したい時など
:nth-child(n) n番目の子要素 繰り返しデザインで順番ごとに変える
:nth-child(odd/even) 奇数・偶数番目の要素 交互の背景色
:first-of-type 同じタグで最初の要素 複数タグ混在時
:last-of-type 同じタグで最後の要素 複数タグ混在時
:not() 除外条件 特定の要素を除くとき

💬 よくある混乱ポイント

❓ :first-child と :first-of-type の違いは？
条件 選ばれるか？
<div><p>テキスト</p></div> ✅ 両方選ばれる
<div><span></span><p>テキスト</p></div> 🚫 :first-child はNG、:first-of-type はOK

つまり：

「first-child」は親の一番目
「first-of-type」は同じタグの一番目

🌷 実用的な使い方例

見出しの最初だけ上マージンを消す

css
コードをコピーする
h2:first-child {
  margin-top: 0;
}

最後のリストだけ下線を消す

css
コードをコピーする
li:not(:last-child) {
  border-bottom: 1px solid #ddd;
}

セクションごとに背景を交互に変える

css
コードをコピーする
section:nth-child(even) {
  background-color: #fafafa;
}

🪄 まとめ

:first-child → 親の中で最初

:last-child → 親の中で最後

:nth-child() → n番目・奇数・偶数など柔軟

:of-type 系 → 同じタグ名の中で対象を絞る

:not() → 除外指定に便利

📌 一言まとめ

疑似クラスを使いこなすと、HTMLにクラスを増やさずにデザイン調整できる！

Discussion