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

この記事は、Zennに投稿した記事を一部編集して転載したものです。

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

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

:first-of-typeで兄弟要素が統一されているとき

例えば以下のコード。: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;
}

:first-of-typeで兄弟要素に異なる種類のタグがあるとき

続いてはこちら。
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タグが無くなってしまった為です。

:first-of-typeを使ってみる

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

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

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

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

【まとめ】:first-of-typeと:last-of-type。これがおすすめ

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