【CSS】first-childとfirst-of-typeの違いは？lastもnthも同じ考え方

投稿日：2020年9月6日更新日：2020年9月11日

こんにちは。

今回は、セレクタ解説の番外編となります。
first-childとfirst-of-typeの違いです。
この二つは似ているのでときどき混乱します。

似たようなセレクタでlast-child、last-of-type、nth-child、nth-of-typeがありますが、これらの違いはfirst-childとfirts-of-typeの違いと同じですので、この記事で全てカバーできるようになっています。

⇨ ＜前編＞複数、子孫、子、隣接…覚えておきたいセレクタをまとめました。6コだけ
⇨ ＜後編＞first-child, nth-of-type,,,覚えておきたいセレクタをまとめました。6コだけ

:first-child

まずは下記の例を見てください。

<style>
　.container p:first-child{
　　color: red;
　}
</style>
<body>
　<div class="container">
    <p>1.このpは指定されてません</p>
    <p>2.このpは指定されてません</p>
    <p>3.このpは指定されてません</p>
  </div>
</body>

兄弟グループの<p>達の中で最初の<p>だけを指定します。

では、次の例はいかがでしょう？

<style>
　.container p:first-child{
　　color: red;
　}
</style>
<body>
　<div class="container">
　　<h1>H1です。</h1>
　　<p>1.このpは指定されてません</p>
　　<p>2.このpは指定されてません</p>
　　<p>3.このpは指定されてません</p>
  </div>
</body>

んんん!?　CSSが適用されなくなってしまいました。

さて、上記2例のHTMLで違いは<h1>があるかどうかです。
一文ですが、ここが大きなポイントとなります。

CSSが適用されなくなった理由は「.container」内の最初の子要素が<p>ではなく、<h1>だからです。
言わば<p>はfirst-childではなく、nth-child(2)になったと考えればいいでしょう。

この問題を解決してくれるのが「:first-of-type」です。

「:first-of-type」は兄弟要素の中でも直前に指定したタグ以外は無視して（今回では<h1>）、指定されたタグの一番目を指定してくれます。
説明を理解しようとするより次の例を見た方がわかりやすいと思います。w

:first-of-type

<style>
　.container p:first-of-type{
　　color: red;
　}
</style>
<body>
　<div class="container">
　　<h1>H1です。</h1>
　　<p>1.このpは指定されてません</p>
　　<p>2.このpは指定されてません</p>
　　<p>3.このpは指定されてません</p>
  </div>
</body>

狙い通りに最初の<p>にCSSが適応されました。
:first-of-typeは同階層の一番最初のタグが直前指定タグ（今回はp:first-of-typeだからp）とは違う場合そのタグを無視して、pタグの中で一番最初のpタグを見つけてCSSを適応してくれます。

「:first-of-type」を使っていれば、上記の例の<div>内に<h2>,<h3>が公開後に追加されたとしても最初の<p>へのCSSは変更されません。
こう言った変更は実装途中でも起きたりしますので、ぜひ理解しましょう！

「:last-child」と「:last-of-type」、「:nth-child」と「:nth-of-type」の違いもこの考え方と同じです。
childとof-typeの違いはしっかり理解しておきましょう！

では！