CSS 擬似要素『nth-child』と『nth-of-type』何が違うの？

## 概要

複数の要素を並べる時によく、
「3番目の要素だけ指定してデザインをあてたい」や
「奇数・偶数番目の要素だけ指定してデザインをあてたい」などがよくある。

その度Google先生に聞いてみると、`:nth-of-type( )` と `:nth-child( )`と出てくるが、
どっちもn番目の要素を指定することができるので、正直混乱する。

そのため、この記事では、`:nth-of-type( )` と `:nth-child( )`の違いの解説と、
n番目、nの倍数番目などどんな指定でも使いこなせるようにサンプルの解説を行います。

## 結論
:::note
:nth-of-type( ) と :nth-child( )の違いは、要素の数え方です。
:::

#### `:nth-child()`の場合
`:nth-child()`は、同じ親要素にある**兄弟関係の全ての要素の中で何番目になるのか**を指定するものになります。
つまりこんな感じになります。

```html
<!--タグに指定する p:nth-child() -->
<div>
    <p>1番目</p>
    <a>2番目</a> 
    <p>3番目</p>
    <p>４番目</p>
</div>
````
:::note warn
p:nth-child()では、 pタグに指定しているので、２番目のaタグにはスタイルがあたりません。
::::

```html
<!--classに指定する .style:nth-child() -->
<div>
    <p>1番目</p>
    <a>2番目</a>
    <p class="style">3番目</p>
    <p class="style">４番目</p>
</div>
```

:::note warn
.style:nth-child()で .styleに指定しているので、1番目、２番目の.styleが指定されていない要素にはスタイルがあたりません。
::::



#### `:nth-of-type()` の場合
`:nth-of-type()`は、同じ親要素にある**兄弟関係の指定した要素の中で何番目になるのか**を指定するものになります。
つまりこんな感じになります。

```html
<!--タグに指定する p:nth-of-type() -->
<div>
    <p>1番目</p>
    <a>    </a>
    <p>2番目</p>
    <p>3番目</p>
</div>
```
:::note warn
aタグは、順番には入りません。
::::

```html
<!--classに指定する p.style:nth-of-type() -->
<div>
    <p>1番目</p>
    <a>    </a>
    <p class="style">2番目</p>
    <p class="style">3番目</p>
</div>
```
:::note warn
nth-of-type()は、class要素には対応していないので、.styleが指定されているpタグが数えられます。
::::


## `nth-of-type` と `nth-child` を使いこなす
### 最初を指定する
**`:first-child` `:first-of-type`**

```css
p:first-child {
  /*スタイルが入る*/
}

p:first-of-type {
  /*スタイルが入る*/
}
```

### 最後を指定する
**`:last-child` `:last-of-type`**

```css
p:last-child {
  /*スタイルが入る*/
}

p:last-of-type {
  /*スタイルが入る*/
}
```

### 最初からx番目を指定する
**`:nth-child(x)` `:nth-of-type(x)`**

``` css
/*３番目の要素を指定する*/
p:nth-child(3) {
  /*スタイルが入る*/
}

p:nth-of-type(3) {
  /*スタイルが入る*/
}
```

### 最後からx番目を指定する
**`:nth-last-child(x)` `:nth-last-of-type(x)`**

``` css
/*３番目の要素を指定する*/
p:nth-last-child(3) {
  /*スタイルが入る*/
}

p:nth-last-of-type(3) {
  /*スタイルが入る*/
}
```

### x番目から最後までを指定する
**`:nth-child(n+x)` `:nth-of-type(n+x)`**

``` css
/*３番目からの要素を指定する*/
p:nth-child(n+3) {
  /*スタイルが入る*/
}

p:nth-of-type(n+3) {
  /*スタイルが入る*/
}
```

### 最後からx番目までを指定する
**`:nth-child(-n+x)` `:nth-of-type(-n+x)`**

``` css
/*３番目までの要素を指定する*/
p:nth-child(-n+3) {
  /*スタイルが入る*/
}

p:nth-of-type(-n+3) {
  /*スタイルが入る*/
}
```


### 最後のx番目から最後までを指定する
**`:nth-last-child(n+x)` `:nth-last-of-type(n+x)`**

``` css
/*３番目からの要素を指定する*/
p:nth-last-child(n+3) {
  /*スタイルが入る*/
}

p:nth-last-of-type(n+3) {
  /*スタイルが入る*/
}
```

### 最初から最後のx番目までを指定する
**`:nth-last-child(-n+x)` `:nth-last-of-type(-n+x)`**

``` css
/*３番目までの要素を指定する*/
p:nth-last-child(-n+3) {
  /*スタイルが入る*/
}

p:nth-last-of-type(-n+3) {
  /*スタイルが入る*/
}
```

### xの倍数番目
**`:nth-child(xn)` `:nth-of-type(xn)`**

``` css
/*３の倍数番目からの要素を指定する*/
p:nth-child(3n) {
  /*スタイルが入る*/
}

p:nth-of-type(3n) {
  /*スタイルが入る*/
}
```

### xの倍数番目のy個となり
**`:nth-child(xn+y)` `:nth-of-type(xn+y)`**

``` css
/*３の倍数番目から2個となりの要素を指定する*/
p:nth-child(3n+2) {
  /*スタイルが入る*/
}

p:nth-of-type(3n+2) {
  /*スタイルが入る*/
}
```

### 兄弟要素が自分1個だけを指定する
**`:only-child` `:only-of-type`**

```css
p:only-child {
  /*スタイルが入る*/
}

p:only-of-type {
  /*スタイルが入る*/
}
```

---

最後まで読んでくださってありがとうございます！

X(Twitter)でも情報を発信しているので、良かったらフォローお願いします！

https://twitter.com/degudegu2510