【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
総合評価
( 5 )
メリット
  • HTMLとCSSの基本が体系的に学べる
  • Webデザインの基本が学べる
  • 1つのWebサイトを作りながら学べる
楽天ブックス
¥2,486 (2024/10/07 13:25時点 | 楽天市場調べ)
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

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

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

<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>

/* 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タグが混在している時です。

<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です。

<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>
/* 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の表示結果

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次