【備忘録】:nth-child(n)の使い方

# はじめに
:nth-child(n)とnth-of-type(n)は良く使われる擬似クラスで、間違えやすいので備忘録として残します。

#目次
-:nth-child(n)
-奇数にスタイルを適用する場合
-偶数にスタイルを適用する場合
-X番目以降の場合
-参考サイト

#E:nth-child(n)
種類に関係なくターゲット要素(E)が属する階層のn番目のターゲット要素(E)にスタイルを適用する。

>p要素をターゲットに4番目の場合

①CSS

```css
p:nth-child(1) {
    color: white;
    background-color: black;
}

p:nth-child(2) {
    color: yellow;
    background-color: black;
}

p:nth-child(3) {
    color: purple;
    background-color: black;
}

p:nth-child(4) {
    color: green;
    background-color: black;
}
```
②html

```html
<body>
    <div>
        <h1>果物</h1> <!-- 1番目だが、h1タグなのでスタイルが適用されない -->
        <p>          <!-- ２番目でpタグ（ターゲット）なのでスタイルが適用される -->
            りんご
        </p>
        <p>          <!-- 3番目でpタグ（ターゲット）なのでスタイルが適用される -->
            バナナ
        </p>
        <div>        <!-- 4番目だが、divタグなのでスタイルが適用されない -->
            トマト？
        </div>
        <p>
            キウイ
        </p>
        <p>
            パイナップル
        </p>
        <p>
            オレンジ
        </p>
        <p>
            みかん
        </p>
        <p>
            ぶどう
        </p>
        <p>
            かき
        </p>
    </div>
```
③結果
![スクリーンショット 2021-02-10 20.12.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/46377d55-44cd-520c-e006-9afced39e5d0.png)

# 奇数にスタイルを適用する場合
>nの部分を「odd」もしくは「2n + 1」にする。nは0から順番に代入される。

①CSS(oddの場合）

```css
p:nth-child(odd) {
    color: white;
    background-color: black;
}
```

②CSS(2n+1の場合）

```css
p:nth-child(2n+1) {
    color: white;
    background-color: black;
}
```

③html
```html

<body>
    <div>
        <h1>果物</h1>
        <!-- 奇数だが、ターゲット要素pタグではないので変化なし -->
        <p>
            りんご
        </p>
        <p>
            バナナ
        </p>
        <div>
            トマト？
        </div>
        <p>
            キウイ
        </p>
        <p>
            パイナップル
        </p>
        <p>
            オレンジ
        </p>
        <p>
            みかん
        </p>
        <p>
            ぶどう
        </p>
        <p>
            かき
        </p>
    </div>

</body>
```

④結果
![スクリーンショット 2021-02-10 20.22.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/c16b7fb1-eb01-600f-c579-9e14b6335993.png)

# 偶数にスタイルを適用する場合
>nの部分を「even」もしくは「2n」にする。nは0から順番に代入される。

①CSS(evenの場合)

```css
p:nth-child(even) {
    color: white;
    background-color: black;
}
```

②CSS(2nの場合)

```css
p:nth-child(2n) {
    color: white;
    background-color: black;
}
```

③html

```html
<body>
    <div>
        <h1>果物</h1>
        <p>
            りんご
        </p>
        <p>
            バナナ
        </p>
        <div>
            <!-- 偶数だが、ターゲット要素pタグではないので変化なし -->
            トマト？
        </div>
        <p>
            キウイ
        </p>
        <p>
            パイナップル
        </p>
        <p>
            オレンジ
        </p>
        <p>
            みかん
        </p>
        <p>
            ぶどう
        </p>
        <p>
            かき
        </p>
    </div>
</body>
```

④結果
![スクリーンショット 2021-02-10 20.27.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/1f53e6f9-c693-da28-79db-071b286f3ab3.png)

# X番目以降の場合
「n + X」のように記述する。例えば、３番目からの場合は「n + 3」。nは0から順番に代入される。

①CSS(4番目からスタイル適用）

```css
p:nth-child(n + 4) {
    color: white;
    background-color: black;
}
```

②html(4番目からスタイル適用）

```html
<body>
    <div>
        <h1>果物</h1>
        <p>
            りんご
        </p>
        <p>
            バナナ
        </p>
        <div><!-- 4番目だが、ターゲット要素pタグではないので変化なし -->
            トマト？
        </div>
        <p>
            キウイ
        </p>
        <p>
            パイナップル
        </p>
        <p>
            オレンジ
        </p>
        <p>
            みかん
        </p>
        <p>
            ぶどう
        </p>
        <p>
            かき
        </p>
    </div>
</body>
```

③結果
![スクリーンショット 2021-02-10 20.34.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/f7f35aca-b87e-eb91-ed7f-bf1fa1f79cf9.png)

# 参考サイト
http://www.htmq.com/selector/nth-of-type.shtml
https://techacademy.jp/magazine/8651