CSSでnth-of-typeとnth-childの違いを現役エンジニアが解説【初心者向け】

初心者向けにCSSでnth-of-typeとnth-childの違いについて解説しています。これらはどちらも擬似クラスであるため、特定の要素を指定するときに使用されます。それぞれの使い方と違いを覚えましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSのnth-of-typeとnth-childの違いについて、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

nth-of-typeとnth-childの違いについて詳しく説明していくね!

大石ゆかり

お願いします!

 

nth-of-typeについて

nth-of-typeとは、指定した要素のうちx番目の要素を選択し、CSSに適用するための擬似要素です。

擬似要素とは、指定した要素の一部にCSSを反映できる方法のことほ指します。

以下、コード例です。

//兄弟関係にある<span>のうちx番目の<span>を選択
span:nth-of-type(x){ 〜 }

<span>要素の数だけを数えて、x番目の<span>要素のみを選択します。

 

nth-childについて

nth-childとは、指定した全ての要素の中でx番目にある指定の要素を選択する擬似要素です。

//<span>と兄弟関係にある、全ての要素の中でx番目にある<span>を選択
span:nth-child(x){ 〜 }

兄弟関係にある全ての要素を数えるため、x番目にある要素が<span>ではない場合、適用できません。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

2つの違い

nth-childとnth-of-typeはx番目の要素を選択するのでとてもよく似ているものの、指定の要素以外の要素を数えるか、数えないかという違いがあります。

下記のようなHTMLで考えた場合、

<div>
  <span>1</span>
  <span>2<!--このspanに適用!--></span> 
  <span>3</span>
</div>

span:nth-child(2)もspan:nth-of-type(2)も<span>2</span>を選択します。

しかし、例えば下記のようなHTMLの場合には、span:nth-child(2)は、<p>を1番目と数えるので、<span>1</span>を選択し、span:nth-of-type(2)は<span>だけを数えるので、<span>2</span>を選択します。

<div>
  <p>Number</p>
  <span>1<!--nth-child(2)で適用!--></span>
  <span>2<!--nth-of-child(2)で適用!--></span>
  <span>3</span>
</div>

次は下記のようなHTMLで考えてみましょう。

HTML

<html>
  <head>
    <meta charset="utf-8">
    <title>nth-of-typeとnth-of-child</title>
  </head>
  <body>
    <ul>
      <li>
        <h2>List01</h2>
        <span>01</span>
        <span>02</span>
        <span>03</span>
        <span>04</span>
        <span>05</span>
      </li>
      <li>
        <h2>List02</h2>
        <span>06</span>
        <span>07</span>
        <span>08</span>
        <span>09</span>
        <span>10</span>
      </li>
      <li>
        <h2>List03</h2>
        <span>11</span>
        <span>12</span>
        <span>13</span>
        <span>14</span>
        <span>15</span>
      </li>
    </ul>
  </body>
</html>

CSS

body{
  margin:30px;
  font-size:20px;
  font-weight:bolder;
}
ul{
  list-style:none;
}
li{
  display:flex;
}
h2{
  padding:1em 0;
  font-size:20px;
}
span{
  padding:1em;
  margin:1em;
  background:gold;
}
span:nth-of-type(3){
  background:tomato;
}

 

span:nth-of-type(3){ background:tomato; }

とすると、<li>の中で3番目の<span>要素である03, 08, 13のボックスの背景色が赤色に変更されます。

span:nth-child(3){ background: limegreen;}

とした場合、<li>の中の<h2>要素が1番目になるので、2つめの<span>要素である02, 07, 12のボックスの背景色が緑色に変化するでしょう。

 

 

nth-of-typeとnth-childを使って違いを確認してみよう

nth-of-typeとnth-childでどのボックスの色が変わるか確認してみましょう。

どちらも指定要素を数えるという点に注意してください。

HTML

<html>
  <head>
    <meta charset="utf-8">
    <title>nth-of-typeとnth-of-child</title>
  </head>
  <body>
    <ul>
      <li>
        <h2>List01</h2>
        <span>01</span>
        <span>02</span>
        <span>03</span>
        <span>04</span>
        <span>05</span>
      </li>
      <li>
        <h2>List02</h2>
        <span>
          <span>06-A</span>
          <span>06-B</span>
        </span>
        <span>09</span>
        <span>10</span>
      </li>
      <li>
        <h2>List03</h2>
        <span>
          <span>11</span>
          <span>12</span>
          <span>13</span>
          <span>14</span>
          <span>15</span>
        </span>
      </li>
    </ul>
  </body>
</html>

CSS

body{
  margin:30px;
  font-size:20px;
  font-weight:bolder;
}
ul{
  list-style:none;
}
li{
  display:flex;
}
h2{
  padding:1em 0;
  font-size:20px;
}
span{
  padding:1em;
  margin:1em;
  background:gold;
  border:1px solid #fff;
}

CSSに下記を追加するとどのボックスが変化するか確認してみましょう。

入れ子構造でたくさんの<span>があるものの、並列にならんでいる要素を数える点に注意しましょう。

 

span:nth-child(2){
  background:tomato;
}
span:nth-of-type(2){
  background:limegreen;
}

 

 

執筆してくれたメンター

橋本真理

web/グラフィックデザイナー

webサイトのデザインからコーディング等一式、ロゴや各種広告などのデザインやイラストを描いたりしています。

TechAcademyではWebデザインコース・WordPressコースを担当。

趣味は、ラジオと音楽と踊ること。

 

大石ゆかり

CSSでnth-of-typeとnth-childの違いがよくわかったので良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので参加してみてください。