🍋

:first-childと:first-of-type、:last-childと:last-of-typeの違い

2020/12/27に公開

今日は曖昧に覚えがちな、
:first-childと:first-of-type、:last-childと:last-of-typeの違いについてまとめました。

:first-childと:first-of-typeの違い

<div>
  <h2>芥川龍之介</h2>
  <p>蜘蛛の糸</p>
  <h2>坂口安吾</h2>
  <p>桜の森の満開の下</p>
</div>

h2:first-child {
  color: red;
}

これだと何も問題なく最初のh2要素が赤色になってますよね。
しかし、問題は次です。

<div>
  <h1>文豪紹介</h1>
  <h2>芥川龍之介</h2>
  <p>蜘蛛の糸</p>
  <h2>坂口安吾</h2>
  <p>桜の森の満開の下</p>
</div>

h2:first-child {
  color: red;
}

h1が追加され、h2が一番最初の子要素ではなくなった途端、
CSSが効かなくなりました。

:first-childは指定した要素(今回ならh2)が一番最初の子要素である必要があります。

それに比べ、:first-of-typeは指定した要素が一番最初でなくても有効です。
つまり、h2が子要素の中で一番でなくても、h2の中で一番最初の要素にCSSを適用します。

<div>
  <h1>文豪紹介</h1>
  <h2>芥川龍之介</h2>
  <p>蜘蛛の糸</p>
  <h2>坂口安吾</h2>
  <p>桜の森の満開の下</p>
</div>

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

となると、:last-childと:last-of-typeも同様です。

<div>
  <h1>文豪紹介</h1>
  <h2>芥川龍之介</h2>
  <h2>坂口安吾</h2>
</div>

h2:last-child {
  color: red;
}

指定したh2が最後の子要素ならCSSが適用されますが、

<div>
  <h1>文豪紹介</h1>
  <h2>芥川龍之介</h2>
  <p>蜘蛛の糸</p>
  <h2>坂口安吾</h2>
  <p>桜の森の満開の下</p>
</div>

h2:last-child {
  color: red;
}

h2が最後の子要素でなければ適用されません。

<div>
  <h1>文豪紹介</h1>
  <h2>芥川龍之介</h2>
  <p>蜘蛛の糸</p>
  <h2>坂口安吾</h2>
  <p>桜の森の満開の下</p>
</div>

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

:last-of-typeなら、h2の中で一番最後の要素にCSSを適用するのでバッチリです。

これらの違いを見ると、基本的には、:first-of-typeと:last-of-typeを使用するのがわかりやすくてベタですね。
違いを知っておくと思わぬ挙動に対して困らずに済みます。
気になったらすぐ調べる癖をつけましょう！