未経験からエンジニアになりたい人必見!
おすすめプログラミングスクール3選!

【CSS】nth-childとnth-of-typeの違い

本記事では、CSSのnth-childとnth-of-typeの違いについてサンプルコードを用いて分かりやすく解説しています。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

作成者たにぐち まこと
学習時間9時間
受講者数42,075人
レビュー (8,925件)

nth-childとnth-of-typeは何が違うの?

nth-childとnth-of-typeはn番目の要素に対してのみスタイルを適用させたい時に使われる擬似クラスです。

HTML
<p>nth-child</p>
<ul class="sample1">
  <p>pタグ</p>
  <li>1番目の要素</li>
  <li>2番目の要素</li>
  <li>3番目の要素</li>
</ul>

<p>nth-of-type</p>
<ul class="sample2">
  <p>pタグ</p>
  <li>1番目の要素</li>
  <li>2番目の要素</li>
  <li>3番目の要素</li>
</ul>
CSS
/* nth-childの設定 */
.sample1 li:nth-child(1){
  color:#f00;
}
.sample1 li:nth-child(2){
  color:#0f0;
}
.sample1 li:nth-child(3){
  color:#00f;
}

/* nth-of-typeの設定 */
.sample2 li:nth-of-type(1){
  color:#f00;
}
.sample2 li:nth-of-type(2){
  color:#0f0;
}
.sample2 li:nth-of-type(3){
  color:#00f;
}

▼nth-childとnth-of-typeを使った表示結果

表示結果を確認すると、両方とも全く同じスタイルが適用されていることが分かります。このようにnth-childとnth-of-typeは挙動が似ていることから2つの違いを理解せず使用している人をチラホラ見かけます。

nth-childとnth-of-typeの違いが表れる場面を見ていきましょう。

対象以外のHTMLタグが混在している時

nth-childとnth-of-typeの違いが表れるのは、対象以外のHTMLタグが混在している時です。

HTML
<p>nth-child</p>
<ul class="sample1">
  <p>pタグ</p> <!-- pタグの追加 -->
  <li>1番目の要素</li>
  <li>2番目の要素</li>
  <li>3番目の要素</li>
</ul>

<p>nth-of-type</p>
<ul class="sample2">
  <p>pタグ</p> <!-- pタグの追加 -->
  <li>1番目の要素</li>
  <li>2番目の要素</li>
  <li>3番目の要素</li>
</ul>

▼対象以外のHTMLタグが混在している時の表示結果

先ほど紹介したコードの<ul></ul>内の先頭に<p>タグを追加しました。

すると、nth-childでスタイル適用しているliタグのカラーは「緑・青」と赤色が適用されていないことが確認できます。nth-of-typeでスタイル適用しているliタグのカラーは「赤・緑・青」と全ての色が適用されていることが確認できます。

この結果からnth-childは「li:nth-child(3)」のようにliタグの3番目にスタイルを適用する指定をしても、1番目〜3番目の間に別タグがある場合ずれてスタイルが適用されることが分かります。逆にnth-of-typeは「li:nth-of-type(3)」と指定すれば、1番目〜3番目の間に別タグがあっても3番目のliタグにスタイルが適用されます。

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

first-child、last-child、first-of-type、last-of-typeの違いも、nth-childとnth-of-typeと全く同じです。

最初・最後の要素に別タグがあった場合、指定した最後のタグにスタイルが適用されるのがfirst-of-typeとlast-of-typeで、スタイルが適用されないのがfirst-childとlast-childです。

HTML
<p>first-child last-child</p>
<ul class="sample1">
  <p>pタグ</p>
  <li>1番目の要素</li>
  <li>2番目の要素</li>
  <li>3番目の要素</li>
  <p>タグ</p>
</ul>

<p>first-of-type last-of-type</p>
<ul class="sample2">
  <p>pタグ</p>
  <li>1番目の要素</li>
  <li>2番目の要素</li>
  <li>3番目の要素</li>
  <p>タグ</p>
</ul>
CSS
/* first-child last-childの設定 */
.sample1 li:first-child{
  color:#f00;
}
.sample1 li:last-child{
  color:#00f;
}

/* first-of-type last-of-typeの設定 */
.sample2 li:first-of-type{
  color:#f00;
}
.sample2 li:last-of-type{
  color:#00f;
}

▼first-child、last-child、first-of-type、last-of-typeの表示結果