・「:first-child」と「:first-of-type」の違いは何？
こんな疑問にお答えします。
cssを使うとき疑似クラスの「:first-child」もしくは「:first-of-type」を使うときありますよね。
あまり違いがわからず、とりあえずで使用している方もいるのではないでしょうか。
実は指定の内容が違うんですよね。
これを知らずに使っていると「効かない。。」という問題になることも。
違いを知っておくべし！
ということで、この記事では「:first-child」と「:first-of-type」の違いについて解説していきます！
「:first-child」と「:first-of-type」の違い
「:last-child」と「:last-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」の方は指定が効きませんでした。
<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」の方は指定が効きましたね。
<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」は要素の種類をみつつ最初の子という感じ。
【解説】「: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タグに対しての指定は効きません。
ちなみに他の何番目～～に対しての指定は下記記事にて詳しく紹介しています↓
【解説】CSSの何番目・奇数偶数の指定方法をまとめてみた 【解説】「:first-child」と「:first-of-type」の違い【CSS】：まとめ
- 「:first-child」⇒兄弟要素の「最初の要素」を指定
- 「:first-of-type」⇒兄弟要素の「その種類の最初の要素」を指定
「:first-child」と「:first-of-type」の違い参考にしてみてね！
