【CSSセレクタ】E:nth-child(n)

『セレクタ:nth-child(n)』は、n番目の子要素に適用します。IE8以下では動きません。

『:nth-of-type』との違いは他の要素をカウントするかどうか、というところがあげられます。例えば『p:nth-of-type(2)』と指定した場合、間に別の要素があっても他の要素をカウントせずに2番目のp要素に適用されますが『p:nth-child(2)』と指定した場合は、間にある別の要素もカウントしてしまう為、2番目がp要素じゃなければ適用されません。

サンプルコード

div p:nth-child(1) { color: red;} /* div要素の中の1番目のp要素を赤字にします。 */

ブラウザでの表示結果

div p:nth-child(2) { color: red;} /* div要素の中の2番目のp要素を赤字にします。 */
div.hoge p:nth-child(2) { color: red;} /* クラス『hoge』要素の中の2番目の要素がpじゃないので適用されません。 */

<div>
	<p>ここは1番目のp要素です。</p>
	<p>ここは2番目のp要素です。</p>
</div>
<div class="hoge">
	<p>ここは1番目のp要素です。</p>
	<div>ここは1番目のdiv要素です。</div>
	<p>ここは2番目のp要素です。</p>
</div>

注意点としてid名やクラス名、属性などからの特定と『:only-child』を併用した場合、まずその要素が唯一の存在であるかどうかの特定を行った後になおかつ指定された要素名、id名、クラス名、属性などを持っていた場合に適用する、といった動きになります。例えば、『p.hoge:only-child』と指定した場合、子要素がp要素しか存在しておらず、さらに『hoge』というクラス名を持っていた場合に限りデザインが当たります。

nth系の引数に『n』を使った場合の考察

『:nth-child』、『:nth-last-child』、『:nth-of-type』、『:nth-last-of-type』の引数の値に『n』を使った場合の『n』には『0を含む自然数の連番』が入っているものとして計算されます。数学における偶数を『2n』、奇数を『2n+1』と表す表記方法と同じです。要素数は『1』から数え始めますが、『n』は『0』から数え始めますのでご注意ください。

以下参考例です。『2n』と表したときは以下のような形になります。