CSSのnth-childとnth-of-typeの使い方と違いを解説

この記事では疑似クラスの「nth-child」と「nth-of-type」の使い方と違いについて解説します。

この2つの疑似クラスは非常に似ていますが、要素の「数え方」に違いがあります。

それぞれの違いを理解して使い分けないと思わぬ表示崩れを起こしてしまいます。この記事を最後まで読み、正しく使い分けられるようになりましょう。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

CSSの疑似クラス「nth-child」の使い方

:nth-child(n)はCSSの擬似クラスで、指定した要素のn番目の子要素に対してスタイルを適用させることができます。

nth-childは以下のように記述します。

基本書式

セレクタ:nth-child(n){
  プロパティ: 値;
}

例として、2番目の要素の文字を赤色にする方法を紹介します。

  <ul>
    <li>1番目の要素</li>
    <li>2番目の要素</li>
    <li>3番目の要素</li>
    <li>4番目の要素</li>
    <li>5番目の要素</li>
  </ul>

li:nth-child(2) {
  color: red;
}

出力結果

2番目の要素の文字色を変更することができました。

また、以下のように記述すると2の倍数要素のスタイルを適用させることができます。

li:nth-child(2n) {
  color: red;
}

出力結果

このようにnth-childの（）内にのnと数字を組み合わせれば特定の要素にスタイルを適用することができます。

CSSの疑似クラス「nth-of-type」の使い方

:nth-of-type(n)はCSSの擬似クラスで、指定した要素のうちn番目の兄弟要素に対してスタイルを適用させることができます。

nth-of-typeは以下のように記述します。

基本書式

セレクタ:nth-of-type(n){
  プロパティ: 値;
}

例として、2番目のliタグ内の文字を赤色にする方法を紹介します。

li:nth-of-type(2) {
  color: red;
}

出力結果

記述方法は違いますが、nth-childで紹介した例と同じ出力結果が得られました。
この後は、nth-childとnth-of-typeの違いを解説していきます。

コーダーの方はこれらの違いを知っておかないと、対象となる要素が増えた際に思わぬ表示崩れを引き起こしてしまいます。

nth-childとnth-of-typeの違い

nth-childとnth-of-typeの違いは「要素の数え方」にあります。

3番目の要素に対してスタイルを適用させる例を見てみましょう。

  <div class="box">
    <p>p要素1</p>
    <p>p要素2</p>
    <div>div要素1</div>
    <p>p要素3</p>
    <div>div要素2</div>
    <p>p要素4</p>
  </div>

.box div:nth-child(3) {
  color: red;
}

出力結果

boxクラスの子要素である3番目のdiv要素1にスタイルが適用されました。

次に、()内の数値は3のままでプロパティをnth-of-typeに変更します。

.box div:nth-of-type(3) {
  color: red;
}

出力結果

nth-of-typeを適用した場合は、div要素にスタイルが適用されませんでした。これはnth-childとnth-of-typeの要素の数え方が違うからです。

nth-childは「指定したboxクラス直下にある、全ての兄弟要素の中で3番目のdiv」を指定しています。

対してnth-of-typeは「指定したboxクラス直下にある3番目のdivタグ」を指定しています。

nth-of-type(3)を適用してスタイルが反映されなかったのは、指定したdiv要素の兄弟要素3番目のdivがなかったためです。

HTMLに「div要素3」を追加した場合、nth-of-type(3)は適用されます。

<div class="box">
  <p>p要素1</p>
  <p>p要素2</p>
  <div>div要素1</div>
  <p>p要素3</p>
  <div>div要素2</div>
  <p>p要素4</p>

  <!-- 3番目のdiv要素追加 -->
  <div>div要素3</div>
  <!-- -->

</div>

.box div:nth-of-type(3) {
  color: red;
}

出力結果

この場合は指定したdiv要素の3番目としてdivタグがあるため、３番目のdivにスタイルが適用されました。

最後にnth-childとnth-of-typeを同時に適用してみます。

  <div class="box">
    <p>p要素1</p>
    <p>p要素2</p>
    <div>div要素1</div>
    <p>p要素3</p>
    <div>div要素2</div>
    <p>p要素4</p>
    <div>div要素3</div>
  </div>

.box div:nth-child(3) {
  color: blue;
}

.box div:nth-of-type(3) {
  color: red;
}

出力結果

このように、それぞれ別の要素にスタイルが適用されました。

まとめ

nth-childとnth-of-typeは似ているものの「数え方」が違うので使い分けに注意しましょう。

それぞれ使いこなせるようになればとても便利なプロパティです。
また、コーディングスピードの向上とサイトの保守性向上が見込まれるので必ず使えるようになりましょう。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー