【CSS】first-child/last-childとfirst-of-type/last-of-typeの違い、効かない原因を解説

CSSのコーディングにおいて、:first-child と :first-of-type は非常によく似ていますが、その仕組みは大きく異なります。

ここを混同すると「なぜかCSSが効かない！」というトラブルの原因になります。この記事では、初心者の方でも直感的に理解できるよう、コード例を交えて解説します。

first-child/last-childとfirst-of-type/last-of-typeの違いを知りたい方は、当記事をチェックしてください。

first-child/last-childとfirst-of-type/last-of-typeの違い

first-childとfirst-of-typeの違いは以下になります。

• :first-child「（種類に関係なく）兄弟の中で一番最初の要素か？」を判定します。
• :first-of-type「（指定したタグの中で）その種類として一番最初の要素か？」を判定します。

百聞は一見西数なので、以下のコードとプレビューをご覧ください。

<div class="container">
  <p>テキスト</p>
  <p>テキスト</p>
</div>

.container p:first-child {
  color: red;
}

<div class="container">
  <p>テキスト</p>
  <p>テキスト</p>
</div>

.container p:first-of-type {
  color: blue;
}

上記の例は、どちらも最初のp要素のテキストカラーにスタイルが適用されています。

次に、.containerの最初の子要素に、p要素以外を入れてみます。

<div class="container">
  <div class="image">
    <img src="https://placehold.jp/150x150.png" alt="sample" >
  </div>
  <p>テキスト</p>
  <p>テキスト</p>
</div>

.container p:first-child {
  color: red;
}

最初に現れるp要素は、.containerの一番最初の子要素ではないので、first-childは適用されません。

次に、first-of-typeを指定してみます。

<div class="container">
  <div class="image">
    <img src="https://placehold.jp/150x150.png" alt="sample" >
  </div>
  <p>テキスト</p>
  <p>テキスト</p>
</div>

.container p:first-of-type {
  color: blue;
}

一方、first-of-typeを使った場合は、.containerの子要素のなかで最初に現れるp要素にスタイルが適用されているのがわかります。

これは、last-child/last-of-typeも同様です。

<div class="container">
  <p>テキスト</p>
  <p>テキスト</p>
  <div class="image">
    <img src="https://placehold.jp/150x150.png" alt="sample" >
  </div>
</div>

.container p:last-child {
  color: red;
}

<div class="container">
  <p>テキスト</p>
  <p>テキスト</p>
  <div class="image">
    <img src="https://placehold.jp/150x150.png" alt="sample" >
  </div>
</div>

.container p:last-of-type {
  color: blue;
}

first-childを使う場面

first-childを使うのは、「一番最初の子要素になる場合だけ、最初の◯要素にスタイルを適用したい」という場合です。

例えば、p要素が最初の子要素になる場合はmargin-top: 0;を指定したいという場面で使います。

first-of-typeを使う場面

first-of-typeを使うのは、「最初の子要素かどうかは関係なく、兄弟要素の中で最初に出現する◯要素にスタイルを適用したい」という場面です。

例えば、最初の子要素かどうかは

first-childが効かない原因は？

以下のようなHTML構造を例に考えてみましょう。

<div class="parent">
  <h1>タイトル</h1>
  <p>テキスト 1番目</p>
  <p>テキスト 2番目</p>
</div>

ケースA： p:first-child の場合

/* 効きません */
p:first-child {
  color: red;
}

ブラウザは「pタグであり、かつ親要素から見て1番目の子要素であるもの」を探します。

しかし、この例で1番目の子は <h1> です。そのため、条件に一致する要素がなく、何も赤くなりません。

ケースB： p:first-of-type の場合

/* 効きます */
p:first-of-type {
  color: red;
}

ブラウザは「pタグの中で、自分と同じ種類の兄弟の中で1番目のもの」を探します。<h1> は無視され、pタグのグループの中で最初の「テキスト 1番目」にスタイルが適用されます。

クラスに使用する場合

次に、クラスにfirst-child、first-of-typeを使った場合の挙動を見てみましょう。

まずはfirst-childを使ったパターンです。

<div class="container">
  <h2 class="text">見出し</h2>
  <p class="text">テキスト</p>
  <p class="text">テキスト</p>
  <h2 class="text">見出し</h2>
  <p class="text">テキスト</p>
  <p class="text">テキスト</p>
</div>

.container .text:first-child {
  color: red;
}

ここでは、見出しと段落に同じクラス名をつけていますが、最初の要素であるh2要素にだけスタイルが適用されました。

次に、first-of-typeを使った場合の挙動を

<div class="container">
  <h2 class="text">見出し</h2>
  <p class="text">テキスト</p>
  <p class="text">テキスト</p>
  <h2 class="text">見出し</h2>
  <p class="text">テキスト</p>
  <p class="text">テキスト</p>
</div>

.container .text:first-of-type {
  color: blue;
}

最初のh2要素、最初のp要素にテキストカラーが適用されました。

このように、first-of-typeを使う場合は、異なる要素に同じクラス名をつけている場合は注意が必要です。

視覚的なイメージ

この違いを整理すると、以下のようになります。

セレクタの比較表

使い分けの方法

どちらを使うべきか迷ったときは、以下の基準で選ぶのがおすすめです。

1. :first-child を使うとき
   • リスト（li）のように、同じ要素が並んでいることが保証されている場合。
   • 「最初の要素にマージンをつけたい」というような場合。
2. :first-of-type を使うとき
   • h1, p, img など、異なるタグが混在する中で、特定のタグの最初だけにスタイルを当てたい場合。
   • HTMLの構造が後から変わる可能性がある場合（より安全です）。

まとめ：順番か、種類か

• 「とにかく1番目の子」なら first-child
• 「そのタグの中での1番目」なら first-of-type

この違いをマスターするだけで、レイアウト崩れや「CSSが効かない問題」の多くを回避できるようになります。

参考サイト

• :first-child – CSS | MDN
• :first-of-type – CSS | MDN
• :last-child – CSS | MDN
• :last-of-type – CSS | MDN