【解説】「:first-child」と「:first-of-type」の違い【CSS】

パソ君

・「:first-child」と「:first-of-type」の違いは何？

こんな疑問にお答えします。

cssを使うとき疑似クラスの「:first-child」もしくは「:first-of-type」を使うときありますよね。

あまり違いがわからず、とりあえずで使用している方もいるのではないでしょうか。

実は指定の内容が違うんですよね。

これを知らずに使っていると「効かない。。」という問題になることも。

ジト

違いを知っておくべし！

ということで、この記事では「:first-child」と「:first-of-type」の違いについて解説していきます！

【解説】「:first-child」と「:first-of-type」の違い【CSS】

結論からいうと、下記の違いがあります。

「:first-child」と「:first-of-type」のサンプル例

わかりやすいようにサンプル例を作ります。

下記のHTMLと「:first-child」と「:first-of-type」を使ったCSSを用意しました。

<div class="parent">
    <h3>これはh3タグです</h3>
    <p>これはpタグです</p>
    <span>これはspanタグです</span>
    <span>これはspanタグです</span>
    <span>これはspanタグです</span>
</div>

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

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

spanタグに対して、赤色のテキストになるよう指定しております。

その結果がこちら↓

See the Pen 「:first-child」と「:first-of-type」の違い by jito-coder (@jito-coder) on CodePen.

「:first-of-type」で指定したほうだけ、赤色の指定が反映されております。

サンプルの解説「:first-child」

「:first-child」の方は指定が効きませんでした。

<div class="parent">
    <h3>これはh3タグです</h3>
    <p>これはpタグです</p>
    <span>これはspanタグです</span>
    <span>これはspanタグです</span>
    <span>これはspanタグです</span>
</div>

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

というのも上記コードの場合、「兄弟要素の最初の要素＝h3」になります。

つまりspanタグが最初の要素ではないため、指定が効きません。

サンプルの解説「:first-of-type」

「:first-of-type」の方は指定が効きましたね。

<div class="parent">
    <h3>これはh3タグです</h3>
    <p>これはpタグです</p>
    <span>これはspanタグです</span>
    <span>これはspanタグです</span>
    <span>これはspanタグです</span>
</div>

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

というのも上記コードの場合、「兄弟要素のspanタグの最初の要素」になります。

つまりHTML４行目にあたるspanタグにCSSが適用されました。これがspanタグの中では一番最初になりますからね。

「:first-child」と「:first-of-type」の違いをまとめると・・

ようは要素のタイプまで見るかどうかの違いですね。

「:first-child」は要素の種類は関係なく最初の子、「:first-of-type」は要素の種類をみつつ最初の子という感じ。

【解説】「:last-child」と「:last-of-type」の違い【CSS】

最後におまけで「:last-child」と「:last-of-type」についてみていきましょう。

といっても、ほぼ仕組みは同じです。

最後の要素に対して～～となります。

See the Pen 「:last-child」と「:last-of-type」の違い by jito-coder (@jito-coder) on CodePen.

<div class="parent">
    <h3>これはh3タグです</h3>
    <span>これはspanタグです</span>
    <span>これはspanタグです</span>
    <span>これはspanタグです</span>
    <p>これはpタグです</p>
</div>

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

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

こちらも「:last-of-type」だけ効いていますね。spanタグの中での一番最後を指定してるので反映されます。

ただ「last-child」に関しては、最後の要素はpタグのため、spanタグに対しての指定は効きません。

ちなみに他の何番目～～に対しての指定は下記記事にて詳しく紹介しています↓

2023年11月27日 【解説】CSSの何番目・奇数偶数の指定方法をまとめてみた

【解説】「:first-child」と「:first-of-type」の違い【CSS】：まとめ

ジト

「:first-child」と「:first-of-type」の違い参考にしてみてね！