🙆

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

2024/01/12に公開

:first-of-typeと:first-childの違いを理解できていなかったので自分なりにまとめてみました。

【結論】使いやすいのは:first-of-type。:first-childは兄弟要素に異なる種類のタグがあると狙った挙動にならない。

:first-of-typeと:first-childは1点を除き同じ働きをします。
異なる点は兄弟要素があるときの挙動です。

例えば以下のコード。
:first-of-typeと:first-childで指示した文字の色が変わっています。

<ul>
  <li>ホーム</li>
  <li>特徴</li>
  <li>料金</li>
  <li>お問い合わせ</li>
</ul>

li:first-child {
  color: red;
}

li:last-child {
  color: blue;
}

続いてはこちら。
liタグの上下にpタグを追加してみました。

<ul>
  <p>追加</p>
  <li>ホーム</li>
  <li>特徴</li>
  <li>料金</li>
  <li>お問い合わせ</li>
  <p>追加</p>
</ul>

li:first-child {
  color: red;
}

li:last-child {
  color: blue;
}

するとホームとお問い合わせの色は変わらなくなりました。
liタグの兄弟要素が追加され、最初と最後のliタグが無くなってしまった為です。

その2と同じhtmlのコードに対して:first-of-typeを使ってみます。
するとliタグの最初と最後の要素のみ色が変わっていることが分かります。
恐らくこの挙動が一番素直で使いやすいと思いました。

html

<ul>
  <p>追加</p>
  <li>ホーム</li>
  <li>特徴</li>
  <li>料金</li>
  <li>お問い合わせ</li>
  <p>追加</p>
</ul>

css

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

li:last-of-type {
  color: blue;
}

使用時の挙動を考えると:first-of-typeと:last-of-typeが使いやすいです。
これからはこの2つを使っていきます。