【CSS】擬似クラス『:first-child』と『:first-of-type』の違いとは【サンプル付きで解説】

CSSで最初の要素を指定する方法が2つあるみたいだけど、違いって何？

実際に見たら分かると思うよ！

CSSで最初の要素を指定する擬似クラスに:first-childと:first-of-typeがありますが、その違いについて今回は解説していきます。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼完全無料／

ZeroPlus Gate公式サイト

毎日先着制！

CSSで最初の要素を指定する擬似クラス『:first-child』と『:first-of-type』の違いとは？

まずは、それぞれの違いを文章で見てみます。

:first-child

兄弟要素の中で『最初の要素』を指定

:first-of-type

兄弟要素の中で『指定した要素の最初の要素』を指定

これだけ見てもピンとこないと思うので、サンプル（デモ）を見てみたいと思います。

今回ベースとなるHTMLの書き方はこちらになります（実際のコードとはちょっと違いますが、必要な部分だけ書いています）。

<div class="box">
  <h2>1</h2>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
</div>

この.box内にある要素は、全て兄弟要素となります。

そして、指定した要素の文字色を赤色にしたいと思います。

h2タグを指定した場合

まずは、h2タグをそれぞれの方法で指定してみます。

CSSの書き方はこちら。

.box h2:first-child {
  color: red;
}

.box h2:first-of-type {
  color: red;
}

See the Pen
CSSの要素指定（） by junpei (@junpei-sugiyama)
on CodePen.

同じ結果になりましたね。

指定した要素が兄弟要素の最初の要素である『h2タグ』なので、どちらもスタイルが適用されました。

spanタグを指定した場合

今度は、spanタグをそれぞれの方法で指定してみます。

.box span:first-child {
  color: red;
}

.box span:first-of-type {
  color: red;
}

See the Pen
by junpei (@junpei-sugiyama)
on CodePen.

今回は、:first-childが効いていません。

CSSでの指定は、span:first-childですね。

しかし、:first-childは『兄弟要素の最初の要素』を指定するもので、今回のHTMLでは『兄弟要素の最初の要素』はspanタグではなくh2タグです。

兄弟要素の最初の要素（h2タグ）ではない要素（spanタグ）を指定したので、適用されてないという事です。

そして、:first-of-typeの方は、兄弟要素の中の指定した要素の最初の要素を指定します。

今回の場合は、spanタグの事を指します。

なので、spanタグの最初の要素である2にスタイルが適用されたという事です。

それでは、もう一度HTMLを見てみます。

<div class="box">
  <h2>1</h2> <!-- 兄弟要素の『最初の要素』 -->
  <span>2</span> <!-- 兄弟要素の中の『指定した要素の最初の要素』（ここではspanタグを指定） -->
  <span>3</span>
  <span>4</span>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
</div>

pタグを指定した場合

今度は、pタグをそれぞれの方法で指定してみます。

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

.box p:first-of-type {
  color: red;
}

先ほどのspanタグが分かれば、今回は予想出来ると思います。

See the Pen
CSSの要素指定（ p） by junpei (@junpei-sugiyama)
on CodePen.

:first-childの方は、spanタグ同様効いていません。

そして、:first-of-typeの兄弟要素の中の指定した要素の最初の要素はpタグなので、ここでは5にスタイルが適用されています。

CSSの最後の要素を指定する擬似クラス『:last-child』と『:last-of-type』も考え方は同じ

先ほどまでは最初の要素を指定する方法について書きましたが、同じように最後の要素を指定する擬似クラスもあります。

先ほどの:first-childは兄弟要素の最初の要素なのでh2タグ（数字の1）を指していましたが、今回の:last-childは兄弟要素の最後の要素なのでpタグの最後（数字の10）を指します。

これも考え方は先ほどまでと同じなので、コードとサンプル（デモ）だけ見てみましょう。

h2タグを指定した場合

.box h2:last-child {
  color: red;
}

.box h2:last-of-type {
  color: red;
}

See the Pen
CSSの最後の要素指定（ h2タグ） by junpei (@junpei-sugiyama)
on CodePen.

spanタグを指定した場合

.box span:last-child {
  color: red;
}

.box span:last-of-type {
  color: red;
}

See the Pen
CSSの最後の要素指定（ spanタグ） by junpei (@junpei-sugiyama)
on CodePen.

pタグを指定した場合

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

.box p:last-of-type {
  color: red;
}

See the Pen
by junpei (@junpei-sugiyama)
on CodePen.

まとめ

今回は、擬似クラス『:first-child』と『:first-of-type』の違いを解説しました。

擬似クラスは似てますが明確な違いがあるので、もし使い方に迷ったらこの記事を参考にしてみて下さい。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！

投げ銭で応援する🐶