nth-childとnth-of-typeの使い方 – それぞれどこの要素を指すのか

nth-child と nth-of-type はどちらも「n番目にある要素」を指定するCSSの疑似クラスです。

奇数と偶数でスタイルを変更する、○番目〜○番目まではこのスタイルなど、さまざまな順番を指定できます。

【疑似クラスについて】CSSの疑似要素と疑似クラスまとめ

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

2つの違いは、要素の数え方です。

nth-child の場合は、要素の種類に関係なく兄弟要素を数えます。nth-of-type の場合は、兄弟要素のうち、指定した要素の種類を数えます。

以下のHTMLコードに p:nth-child(2) と p:nth-of-type(2) を指定して別のスタイルを当ててみます。どちらも「2番目」を指定しています。

<div>
  <h1>見出し１</h1>
  <p>テキスト1</p>
  <h2>見出し２</h2>
  <p>テキスト2</p>
  <p>テキスト3</p>
</div>

<div>
  <h1>見出し１</h1>
  <p>テキスト1</p>
  <h2>見出し２</h2>
  <p>テキスト2</p>
  <p>テキスト3</p>
</div>

p:nth-child(2) {
  color: forestgreen;
}
p:nth-of-type(2) {
  color: sandybrown;
}

p:nth-child(2) {
  color: forestgreen;
}
p:nth-of-type(2) {
  color: sandybrown;
}

結果は、
nth-child は要素の種類は関係ないため、純粋に2つ目の要素、h1 下の p 要素（テキスト1）が当てあまります。
nth-of-type は要素の種類で数えるため、 p 要素の2つ目（テキスト2）が当てはまります。

スタイルが効かない場合

nth-child や nth-of-type でスタイルが効かない時は、指定している要素や順番をもう一度HTMLと照らし合わせてみてください。

さまざまな兄弟要素があり、クラスで指定していると思った通りにいかないこともあるかもしれません。

<div>
  <h1 class="elm1">見出し１</h1>
  <p>テキスト1</p>
  <p class="elmp">テキスト2</p>
  <h2 class="elm2">見出し２</h2>
  <p class="elmp">テキスト3</p>
  <p class="elmp">テキスト4</p>
</div>

<div>
  <h1 class="elm1">見出し１</h1>
  <p>テキスト1</p>
  <p class="elmp">テキスト2</p>
  <h2 class="elm2">見出し２</h2>
  <p class="elmp">テキスト3</p>
  <p class="elmp">テキスト4</p>
</div>

.elmp:nth-child(2) {
  color: forestgreen;
}
.elmp:nth-of-type(2) {
  color: sandybrown;
}

.elmp:nth-child(2) {
  color: forestgreen;
}
.elmp:nth-of-type(2) {
  color: sandybrown;
}

このHTMLとCSSの場合、どこにスタイルが当たるでしょうか？

.elmp:nth-child(2) はスタイルが当たらず、.elmp:nth-of-type(2) では「テキスト2」にスタイルが当たります。

:nth-child(2) は2番目の要素を指します。そして2番目の要素は <p>テキスト1<p> でクラスが指定されていません。そのため .elmp:nth-child(2) に当てはまらないため、スタイルが適用されません。
<p class="elmp">テキスト1<p> にするか、p:nth-child(2) にすることでスタイルが当てられるようになります。

.elmp:nth-of-type(2) が指すのは、elmp クラスのある要素の種類の2番目です。ここでは p 要素が当てはまり、クラスの有無は関係ありません。

  <p>テキスト1</p>                ← nth-of-type(1)
  <p class="elmp">テキスト2</p>   ← nth-of-type(2)
  <h2 class="elm2">見出し２</h2>
  <p class="elmp">テキスト3</p>   ← nth-of-type(3)

もし、HTMLがこのような順序だったら、.elmp:nth-of-type(2) でもスタイルが適用されません。

  <p class="elmp">テキスト1</p>   ← nth-of-type(1)
  <p>テキスト2</p>                ← nth-of-type(2)
  <h2 class="elm2">見出し２</h2>
  <p class="elmp">テキスト3</p>   ← nth-of-type(3)

.elmp というクラスがついている要素の2番目ではないことが注意点です。クラス名で数えてしまうと思った通りにスタイルが当てられない、ということになります。

【NGな数え方】

  <p>テキスト1</p>
  <p class="elmp">テキスト2</p>   ← elmpクラスがついている要素の1番目としてnth-of-type(1)
  <h2 class="elm2">見出し２</h2>
  <p class="elmp">テキスト3</p>   ← elmpクラスがついている要素の2番目としてnth-of-type(2)

奇数や偶数の指定

奇数・偶数で指定したい場合、oddもしくはevenを記述します。

:nth-child(odd) … 奇数

:nth-child(even) … 偶数

倍数（「○番目ごとに」）指定

「n」を使って計算式で指定することもできます。「n」は0から始まり、1、2、3と上がっていきます。
例えば :nth-child(3n) なら「3 × n」で計算されます。「n」が0から始まるので、「3 × 0 = 0」「3 × 1 = 3」「3 × 2 = 6」「3 × 3 = 9」と倍数に当てはまる要素にスタイルが適用されます。

◯番目の要素から倍数で指定したい場合は nth-child(3n+2) という形を使用します。+2 が最初に指定したい要素の順序、「3n」の「3」が上げていきたい数です。

「○番目以降」の指定

特定の順番以降に適用したい場合は nth-child(n+3) という形を使用します。n+3 なら「0 + 3 = 3」からスタート、nが1ずつ上がるので3番目以降が当てはまります。

「○番目まで」の指定

特定の順番以降に適用したい場合は n の前に「-」マイナスをつけて nth-child(-n+3) という形を使用します。-n+3 なら「-0 + 3 = 3」からスタート、「-1 + 3 = 2」「-2 + 3 = 1」となるので、和（計算式の答え）が減っていきます。

「○番目〜○番目まで」の指定

特定の順番内で指定したい場合は、「○番目以降」と「○番目まで」を組み合わせて指定します。

組み合わせる際にはコロンでつなげます。:nth-child(n+2):nth-child(-n+5)

「○番目以外」の指定

「その順番以外」を指定したい場合は、セレクタの後に :not をつけて 擬似クラスをカッコ「（）」で囲います。

:not(:nth-child(2))