cssで普段から良く使う、〇〇番目の要素を指定するnth-child・nth-of-typeについて、まとめておきたいと思います。

nth-child、nth-of-typeの種類について

指定対象	「nth」擬似クラス
X番目で指定した要素	nth-child(X)	nth-of-type(X)
最後からX番目の要素	nth-last-child(X)	nth-last-of-type(X)
最初の要素	first-child()	first-of-type()
最後の要素	last-child()	last-of-type()
要素がひとつだけの場合	only-child()	only-of-type()

nth-child、nth-of-typeの違いについて

この2つの擬似クラスは、同じような機能を持っており、HTMLの構造によっては全く同じ結果になりますが、以下の通り、それぞれ異なる要素の数え方をします。

nth-child(X)

X番目の子要素を指定する

nth-of-type(X)

同じタイプのタグで、X番目の子要素を指定する

使用サンプル

使用するHTMLサンプル。

<div>
  <h1>見出し1</h1>
  <p>ここは1番目の「p」</p>
  <p>ここは2番目の「p」</p>
  <p>ここは3番目の「p」</p>
  <h2>見出し2</h2>
  <p>ここは4番目の「p」</p>
  <p>ここは5番目の「p」</p>
  <p>ここは6番目の「p」</p>
</div>

nth-child(X)

Xで指定した要素を指定

/* 親要素divの1番目の子要素は、「見出し1」なので赤字にならない */
div p:nth-child(1) { color:red; }

/* 親要素divの3番目の子要素 */
div p:nth-child(3) { color:blue; }

/* 親要素divの6番目の子要素 */
div p:nth-child(6) { color:hotpink; }

nth-of-type(X)

Xで指定した同じタイプのタグを指定

div p:nth-of-type(1) {color: red}
div p:nth-of-type(3) {color: blue}
div p:nth-of-type(6) {color: hotpink}

nth-child(Xn)

Xの倍数の要素を指定

/* 3の倍数である子要素を赤に */
div p:nth-child(3n) {color: red}

/* 5の倍数の子要素を青にするが、5番目が「見出し2」のため反映されない */
div p:nth-child(5n) {color: blue}

nth-child(odd)、nth-child(even)

「odd」（奇数）、「even」（偶数）の要素を指定

div p:nth-child(odd) {color: red}
div p:nth-child(even) {color: blue}

nth-last-child(X)

最後からX番目の要素を指定

div p:nth-last-child(1) {color: red}
div p:nth-last-child(3) {color: blue}
div p:nth-last-child(6) {color: hotpink}

nth-last-of-type(X)

最後からX番目の同じタイプのタグを指定

div p:nth-last-of-type(1) {color: red}
div p:nth-last-of-type(3) {color: blue}
div p:nth-last-of-type(6) {color: hotpink}

first-child

最初の要素を指定

div h2:first-child {color: blue}
div p:first-child {color: red}

first-of-type

最初の同じタイプのタグを指定

div h2:first-of-type {color: blue}
div p:first-of-type {color: red}

last-child

最後の要素を指定

div h2:last-child {color: blue}
div p:last-child {color: red}

last-of-type

最後の同じタイプのタグを指定

div h2:last-of-type {color: blue}
div p:last-of-type {color: red}

only-childとonly-of-typeについて

どちらも唯一の子要素だった場合に、反映されますが、
only-childの場合、以下のサンプルでは、p以下にspanが唯一であっても、strongが一緒にあるなど、他のタグが一緒にある場合は、反映されません。

使用するHTMLサンプル。

<div>
  <h2>見出し1</h2>
  <p>ここは<span>1</span>番目の「<span>p</span>」</p>
  <p>ここは<span>2</span>番目の「<span>p</span>」</p>
  <p>ここは<strong>3</strong>番目の「<span>p</span>」</p>
  <h3>見出し2</h3>
  <p>ここは<span>4</span>番目の「<span>p</span>」</p>
  <p>ここは<span>5</span>番目の「<span>p</span>」</p>
  <p>ここは<span>6</span>番目の「p」</p>
</div>

only-child

唯一の子要素を指定

div p span:only-child {color: blue}

only-of-type

同じタイプのタグで唯一の子要素を指定

div p span:only-of-type {color: blue}