Web制作 CSS

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

最初の要素を指定する方法が2つあるみたいだけど違いって何?
実際に見たら分かると思うよ!

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

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


最初の要素を指定する擬似クラス『: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タグをそれぞれの方法で指定してみます。

.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にスタイルが適用されています。

 

最後の要素を指定する擬似クラス『: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.

以上になります。

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

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, CSS