:nth-of-type(n)が効かない時の対処

#Element:nth-of-type(n)の挙動

前提として、
途中で別の種類のElementが入る場合にはそれを数えずに、 指定した種類のElementのみを数えてスタイル適用の対象が決定される。

• Elementを対象範囲とし
• n番目を指定し
• .classと一致するかどうか(.classが無い場合は省略)

という順番でスタイルの付与を判断している点に注意が必要。
(おそらく一番多い指定の仕方だが)Elementを省略している場合(.class:nth-of-type(n))であっても、.classの付与されているElementを検索し対象範囲を決めているため、
「.classを対象範囲とし、n番目を指定しスタイルを付与しているわけではない」
という事を留意する必要がある。

##.Elementを使用した指定(classは省略)
.classでの指定は行わず、Elementだけを用いた記述の例。htmlは以下。

  <div>1番目：div</div>
  <p>2番目：p</p>
  <div>3番目：div</div>
  <p>4番目：p</p>
  <div>5番目：div</div>
  <p>6番目：p</p>

###例：div:nth-of-type(1)

divを対象範囲とし、1番目を指定し、.classは省略されているため「1番目のdiv」にスタイルが付与される。

div:nth-of-type(1){
  color:red;
}

---

###例：div:nth-of-type(2)
divを対象範囲とし、2番目を指定し、.classは省略されているため「2番目のdiv」にスタイルが付与される。
pを対象範囲外としdivのみで数えている。

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

---

###例：p:nth-of-type(3)
pを対象範囲とし、3番目を指定し、.classは省略されているので「3番目のp」にスタイルが付与される。
divを含めた兄弟要素内では6番目に位置するが、あくまで「p要素の3番目」をターゲットにしている。

p:nth-of-type(3){
  color:red;
}

---

##すべて違う.classを使用した指定(Elementは省略)
.Elementでの指定は行わず、すべてに違う.classを用いた記述の例。htmlは以下。

  <div class="target-1">1番目：div</div>
  <p class="target-2">2番目：p</p>
  <div class="target-3">3番目：div</div>
  <p class="target-4">4番目：p</p>
  <div class="target-5">5番目：div</div>
  <p class="target-6">6番目：p</p>

###例：.target-1:nth-of-type(1)

.target-1の付与されているElement=[div]を対象範囲とし、1番目を指定し、.target-1が付与されているためスタイルが付与される。
「.target-1を対象範囲とした1番目」ではなく、「divを対象範囲とした1番目の.classが.target-1だった」ためスタイルが付与されている。

.target-1:nth-of-type(1){
  color:red;
}

---

###例：.target-3:nth-of-type(1)

.target-3の付与されているElement=[div]を対象範囲とし、1番目を指定するが、.target-3が付与されていないためスタイル付与がされない。(divの1番目はtarget-1であり、target-3が付与されているのは2番目のdiv)

.target-3:nth-of-type(1){
  color:red;
}

---

###例：.target-6:nth-of-type(3)

.target-6の付与されているElement=[p]を対象範囲とし、3番目を指定し.target-6が付与されているためスタイルが付与される。

.target-6:nth-of-type(3){
  color:red;
}

##すべて同じ.classを使用した指定(Elementは省略)
.Elementでの指定は行わず、すべて同じ.classを用いた記述の例。htmlは以下。

  <div class="target">1番目：div</div>
  <p class="target">2番目：p</p>
  <div class="target">3番目：div</div>
  <p class="target">4番目：p</p>
  <div class="target">5番目：div</div>
  <p class="target">6番目：p</p>

###例：.target:nth-of-type(1)
.targetの付与されているElement=[divとp]を対象範囲とし、1番目を指定し.targetが付与されているためスタイルが付与される。
対象範囲としているのは[divとp両方]という点に注意。
仮にdivとp以外の要素(例：<span class="target"></span>)をどこであれ兄弟要素として追加するなら、[divとpとspan]を対象範囲とするため<span>にもスタイルが付与される。

.target:nth-of-type(1){
  color:red;
}

---

###例：.target:nth-of-type(2)
.targetの付与されているElement=[divとp]を対象範囲とし、2番目を指定し.targetが付与されているためスタイルが付与される。
各Elementの2番目にスタイルが付与されている。

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

---

###例：.target:nth-of-type(5)
.targetの付与されているElement=[divとp]を対象範囲とし、5番目を指定するが、それぞれのElementは3つずつしか存在しないためスタイルが付与されない。

.target:nth-of-type(5){
  color:red;
}

#追記:(入れ子の場合)

.wrap01~03の中に.targetを持つdivとpを配置した構造。htmlは以下。

<div class="wrap01">
  <div class="target">1番目：div</div>
  <p class="target">2番目：p</p>
  <div class="target">3番目：div</div>
  <p class="target">4番目：p</p>
  <div class="target">5番目：div</div>
  <p class="target">6番目：p</p>
 </div>
 <div class="wrap02">
  <div class="target">1番目：div</div>
  <p class="target">2番目：p</p>
  <div class="target">3番目：div</div>
  <p class="target">4番目：p</p>
  <div class="target">5番目：div</div>
  <p class="target">6番目：p</p>
 </div>
 <div class="wrap03">
  <div class="target">1番目：div</div>
  <p class="target">2番目：p</p>
  <div class="target">3番目：div</div>
  <p class="target">4番目：p</p>
  <div class="target">5番目：div</div>
  <p class="target">6番目：p</p>
 </div>

###例：.wrap02:nth-of-type(2) .target:nth-of-type(3)

他の例と同様、
.wrap02の付与されているElement=[div]を対象範囲とし、2番目を指定、.wrap02も持つため正となる。
さらに.target付与されているElement=[divとp]を対象範囲とし、3番目の要素が.targetを持つためスタイルが付与される。
仮に.wrap02:nth-of-type(1)であったりするとスタイルが付与されない。

.wrap02:nth-of-type(2) .target:nth-of-type(3){
  color:red;
}

#まとめ
.classを指定して使用する事が多いですが、いずれも「.classを対象範囲としているわけではない」ことが間違えやすいなと感じています。いずれの場合も「Elementを対象範囲としている」点を留意して、上手に使っていきたいですね。