CSSのnth-childとnth-of-typeについて基本から学ぼう

この記事について

この記事は、スマートフォン時代のWebデザインスクールやスマートフォン時代のWebコーディングスクール初回体験レッスンなどをお手伝いして頂いている「やのうまり絵」さんによる寄稿記事です。

フリーランスの「やのうまり絵（@maYrie86）」と申します。普段、Webサイト制作を行っておりWebデザインからコーディング、WP構築を行っています。

共著：世界一わかりやすい Dreamweaver 操作とサイト制作の教科書 CC対応
これから学ぶ方でも教科書通りに手を動かせば一つのサイトが完成する流れになっています。

nth-childとnth-of-typeとは

「nth-child」と「nth-of-type」は、n番目の要素を指定したり、偶数番目など一定間隔の要素を指定することができる使いやすいCSSセレクタの擬似クラスです。

理解して使用しないと「指定したつもりのないところにスタイルが適用される」など意図した挙動にならないことがあります。

この記事では、基本から違いについて、そして組み合わせによる指定方法について説明していきます。

基本の使い方

まずは「nth-child」と「nth-of-type」の基本の使い方を説明します。

E:nth-child(n)
E:nth-of-type(n)

Eに指定したいHTML要素(Element)を書き、nにEの親要素の中で何番目を指定したいか値を書きます。
値には、整数、odd（奇数）、even（偶数）、式を指定することができます。

たとえば、以下のようなHTMLがあったとします。

<ul>
   <li>一つ目の項目</li>
   <li>二つ目の項目</li>
   <li>三つ目の項目</li>
   <li>四つ目の項目</li>
   <li>五つ目の項目</li>
</ul>

「二つ目の項目」のみ色を付けたいという場合、昔ながらの書き方では二つ目の項目にclassをつけるといった書き方をしていたかもしれません。

しかし、nth-childを使用すればHTMLには手を加える必要がなくなります。

整数による指定方法

:nth-child(2)　･･･　上から2番目の要素を選択。

以下の［Run Pen］をクリックし、［HTML］［CSS］をクリックするとそれぞれのコードを見たり、実際の実行結果を見ることができます。

odd（奇数）、even（偶数）による指定方法

:nth-child(odd)　･･･　奇数の要素を選択。
:nth-child(even)　･･･　偶数の要素を選択。

式による指定方法

:nth-child(3n)　･･･　3の倍数（3,6,9…）番目の要素を選択。

:nth-child(3n+1)　･･･　1,4,7,10…番目（3つ置き）の要素を選択。

どのような違いがあるか

「nth-child」は兄弟関係の要素をカウントするのに対して、「nth-of-type」は指定した要素のみをカウントします。

兄弟関係とは

兄弟関係の要素は、指定した要素と同階層の要素を指します。

<div class=“parent">
      <p>一つ目の要素</p>
       <div class="child">二つ目の要素</div>
       <div class="child">三つ目の要素</div>
       <div class="child">四つ目の要素</div>
 </div>

p:nth-child(n)を指定した場合、<div class=”parent”>〜</div>が親要素となり、指定した要素<p>と同階層のHTML要素が兄弟関係にある要素になります。

次に、それぞれの使い方について見てみましょう。

E:nth-child(n)

Eに指定したい要素を、nに何番目かを指定します。親要素内の兄弟関係の要素すべてをカウントします。
n番目の要素が指定した要素だった場合に、スタイルを適用することができます。

<div>
    <div>div要素</div>
    <p>一つ目のp要素</p>
    <p>二つ目のp要素</p>
    <p>三つ目のp要素</p>
</div>

二つ目のp要素を指定したい場合はこのように書きます。

p:nth-child(3)

E:nth-child(n)は上述の通りすべての要素をカウントするため、nの値は3になります。

E:nth-of-type(n)

こちらもEに指定したい要素を、nに何番目かを指定します。
「nth-child」とは違い、Eのみをカウントします。そして、n番目にスタイルが適用されます。

<div>
    <div>div要素</div>
    <p>一つ目のp要素</p>
    <p>二つ目のp要素</p>
    <p>三つ目のp要素</p>
</div>

二つ目のp要素を指定したい場合はこのように書きます。

 p:nth-of-type(2)

E:nth-of-type(n)は指定した要素(p)をカウントするため、nの値は2になります。

class付きの要素を指定する場合

シンプルなHTML構造で説明してきましたが、実際に使う場面では要素にidやclassなど属性を付けたり少し複雑な構造になることもあります。

仕様を把握していないと意図した要素へ指定できないことがありますのでclass付きの要素の指定について説明します。

サンプルのHTMLでは、親要素となるdivにparentクラスが、子要素そなるpのうち3つにchildクラスが付いています。

<div class="parent">
    <p>クラス無しのp要素</p>
    <p class="child">childクラス付きのp要素</p>
    <p class="child">childクラス付きのp要素</p>
    <p class="child">childクラス付きのp要素</p>
</div>

p.child:nth-of-type(2){
    color: red;
}

この指定では、このようにスタイルが適用されます。

Eにp.childを指定していますが、クラスの付与関係なくp要素をカウントし2番目のp要素にchildクラスが付いていた場合にスタイルが適用されます。
p.childのみをカウントするわけではありませんのでご注意ください。

その他の関連セレクタについて

関連する擬似クラスを一部紹介します。

:first-child・・・最初の要素を選択
:last-child・・・最後の要素を選択
:nth-last-child(2)・・・最後から2番目を選択
:nth-last-child(-n+2)・・・最後から2番目までを後ろから選択
:not(:nth-child(2))・・・2番目以外を選択
:only-child・・・親要素の中で要素が1つのみの場合に選択
:nth-child(n+2)・・・前から2番目以降を選択
:nth-child(-n+2)・・・最初の要素から2番目までを選択