:nth-of-typeの活用方法、:nth-childとの違い

:nth-of-typeは兄弟要素の中から同じ種類の要素を位置に基づいて選択することができるCSSの擬似クラスです。

この記事:nth-of-typeの使い方と間違えやすい:nth-childとの違いについてまとめています。

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

早速ですが:nth-childと:nth-of-typeの違いを確認します。どちらも疑似クラスですが違いは以下のようになります。

以下のような.parentというタグの中に.colというクラスを持った要素が並んでいるとします。

<div class="parent">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
</div>

偶数数の.colにだけ、背景色を付けたい場合、:nth-child、:nth-of-typeで以下のように記述すれば同じ結果になります。

.col:nth-child(even) {
background-color: lightgray;
}

.col:nth-of-type(even) {
  background-color: lightgray;
}

しかし、親要素.parentの中に.col以外の他の要素が入っている場合には、:nth-childでは違う結果になります。

<div class="parent">
  <p>nth-of-typeのサンプル</p>
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
</div>

:nth-of-type, :last-of-type, :nth-last-of-typeの例

次のHTMLは.wrapperの中にdiv.elemとpタグが混在しています。

<div class="wrapper">
	<div class="elem">1</div>
	<div class="elem">2</div>
	<p>P1</p>
	<div class="elem">3</div>
	<div class="elem">4</div>
	<div class="elem">5</div>
	<p>P2</p>
</div>

.wrapperの中にある2番目のp要素を指定したい場合は以下のようになります。

.wrapper p:nth-of-type(2){
	background-color:aqua;
}

また、以下のようにな指定も可能です。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
</ul>

偶数のliの文字だけ赤くしたい場合：

li:nth-of-type(2n) {
  color: red;
}

偶数・奇数はodd,evenを使うことも可能です。

/* 偶数even */
li:nth-of-type(even) {
  color: red;
}
/* 奇数odd */
li:nth-of-type(odd) {
  color: red;
}

3つおきのliにスタイルを適用したい場合：

li:nth-of-type(3n+1) {
  color: red;
}

1番目、4番目、7番目…というようにスタイルが適用されます。

:last-of-typeの例

最後のli要素にスタイルを適用したい場合：

li:last-of-type {
  color: red;
}

最後の li要素は :last-of-type を使用して指定します。

:nth-last-of-typeの例

:nth-last-of-typeは指定した要素の中で、後ろから n番目の要素にスタイルを適用するために使用します。

ul li:nth-last-of-type(2) {
  color: red;
}

この場合、リストの最後から 2 番目の li 要素に赤い文字色が適用されます。

以上、nth-of-typeの使い方とnth-childとの違いについて説明しました。