: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は以下。

```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」にスタイルが付与される。

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

![スクリーンショット 2020-03-04 15.47.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/d068baca-4dbc-e806-7811-8de0e30ae85e.png)



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

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

![スクリーンショット 2020-03-04 15.48.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/f0cd6762-8e10-da6b-39df-8855f5d3c4a1.png)

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

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

![スクリーンショット 2020-03-04 15.49.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/17561768-23a2-7304-2d05-fadf2ea124df.png)

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

```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だった」ためスタイルが付与されている。

```css
.target-1:nth-of-type(1){
  color:red;
}
```
![スクリーンショット 2020-03-04 16.03.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/6f491355-f49e-6954-4301-2513aa0d4034.png)

---

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

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

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

![スクリーンショット 2020-03-04 16.04.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/e956a8f8-75c8-0ff3-03e4-dda7035e2a2b.png)

---

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

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

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

![スクリーンショット 2020-03-04 16.30.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/fc3b2d5c-7594-4422-1a12-07b8754e1467.png)

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

```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>`にもスタイルが付与される。

```css
.target:nth-of-type(1){
  color:red;
}
```
![スクリーンショット 2020-03-04 16.10.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/f5b2f537-4691-4386-5158-4251d141cb82.png)

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

```css
.target:nth-of-type(2){
  color:red;
}
```
![スクリーンショット 2020-03-04 16.11.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/576fb5e4-5474-ef56-93b6-77c85d0726fc.png)

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

```css
.target:nth-of-type(5){
  color:red;
}
```
![スクリーンショット 2020-03-04 16.04.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/a2e9f3eb-3892-9322-d85b-df502ad9ca28.png)


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


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

```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)であったりするとスタイルが付与されない。


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

![スクリーンショット 2020-03-04 17.30.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543077/399e80c6-8c53-1de1-b835-3c257cffadfa.png)


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