CSSでn個目系を指定する擬似クラス「:nth-child」「:nth-of-type」の、よくわかる解説

CSSで、要素の何番目かを指定する擬似クラス（ここでは勝手に「n個目系」と呼びます）を使う機会は多いのに、出てくるたびにググってる気がしたので、備忘録としてまとめました。

n個目系擬似クラスの種類

n個目系擬似クラスには、以下の種類があります。

:first-child
:nth-child(n)
:nth-last-child(n)
:last-child

:first-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:last-of-type

基本的には記述順に上から「n番目」を数えます。
-lastがついているものに関しては、最後から順に数えていきます。

基本的な使い方

まず最初に、基本的な使い方を押さえておきましょう！
下のようなHTMLの、1つ目・3つ目・最後のテキストカラーを変えてみます。

HTML

<div class="wrapper">
  <p>1つめ</p>
  <p>2つめ</p>
  <p>3つめ</p>
  <p>4つめ</p>
  <p>5つめ</p>
</div>

</div>

CSS

.wrapper p:first-child{
    color: red;
}
.wrapper p:nth-child(3){
    color: yellow;
}
.wrapper p:last-child{
    color: blue;
}

.wrapper p:first-child{

color: red;

}

.wrapper p:nth-child(3){

color: yellow;

}

.wrapper p:last-child{

color: blue;

}

プレビュー

1つめ

2つめ

3つめ

4つめ

5つめ

いちばん最初の要素は:first-child、いちばん最後の要素は:last-child、
それ以外の場合は:nth-child(n)のかっこ内に、指定したい順番を記述します。

-childと-of-typeの違い

-childと-of-typeの違いは、数える要素の対象の違いです。
-childは全ての要素を数えますが、
-of-typeは特定の要素を数えます。

例として、下のようなHTMLを用意しました。

<div class="wrapper">
  <div>1つめ</div>
  <p>2つめ</p>
  <p>3つめ</p>
  <p>4つめ</p>
</div>

</div>

先ほどのHTMLとほぼ同じですが、
子要素が1つめだけdivタグになっています。
これに:nth-child(3)と:nth-of-type(3)を指定して、違いを比較していきます。

nth-childを指定した場合

CSS

.wrapper p:nth-child(3){
    color: red;
}

.wrapper p:nth-child(3){

color: red;

}

プレビュー

1つめ

2つめ

3つめ

4つめ

:nth-child(3)を指定した場合、「3つめ」が赤になります。

nth-of-typeを指定した場合

CSS

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

.wrapper p:nth-of-type(3){

color: red;

}

プレビュー

1つめ

2つめ

3つめ

4つめ

:nth-of-type(3)を指定すると、「4つめ」が赤になっています。

:nth-childは、タグの種類を問わず、単純に3番目の子要素を選んでいます。
それに対し:nth-of-typeは、子要素の中のpタグだけを数えているため、3つ目のpである「4つめ」を選びます。
違いがわかっていただけたでしょうか？

いろいろな使い方

ここからは、:nth-childを使っていろいろな指定方法を解説していきます。
:nth-of-typeの場合も考え方は一緒です。
先の説明を踏まえて、置き換えて考えてみてください。

奇数・偶数を指定する

奇数はoddもしくは2n-1、
偶数はevenもしくは2nを使います。
英語でoddは奇数、evenは偶数という意味です。
どっちがどっちかわからなくなったときは、
「オッドアイ」を思い浮かべるとわかりやすいかもしれません。

ここでは、奇数番目と偶数番目それぞれに
テキストカラーを指定してみます。

HTML

<div class="wrapper">
<p>1つめ</p>
<p>2つめ</p>
<p>3つめ</p>
<p>4つめ</p>
<p>5つめ</p>
<p>6つめ</p>
<p>7つめ</p>
</div>

</div>

CSS

.wrapper p:nth-child(odd){
    color: red;
}
.wrapper p:nth-child(even){
    color: blue;
}

.wrapper p:nth-child(odd){

color: red;

}

.wrapper p:nth-child(even){

color: blue;

}

プレビュー

1つめ

2つめ

3つめ

4つめ

5つめ

6つめ

7つめ

奇数番目が赤、偶数番目が青になりました。
もうひとつの指定方法・2n-1、2nの考え方については、次で詳しく。。

nの倍数を指定する

例えば、3つずつ並ぶ要素があったときに一番右の要素だけ背景色を変えたい。
そんなときに使える方法です。

HTML

単純なリストをinline-blockを使って3つずつ横並びにし、
余白を開けるためにマージンを付与しています。

今回はそこに、背景色をつけていきます。
左側：赤真ん中：青右側：黄色にしたいと思います。

<ul class="wrapper">
  <li>1つめ</li>
  <li>2つめ</li>
  <li>3つめ</li>
  <li>4つめ</li>
  <li>5つめ</li>
  <li>6つめ</li>
  <li>7つめ</li>
</ul>

</ul>

CSS

.wrapper li{
    display: inline-block;
    width: 30%;
    margin: 5px;
}
.wrapper li:nth-child(3n-2){
    background-color: red;
}
.wrapper li:nth-child(3n-1){
    background-color: blue;
}
.wrapper li:nth-child(3n){
    background-color: yellow;
}

.wrapper li{

display: inline-block;

width: 30%;

margin: 5px;

}

.wrapper li:nth-child(3n-2){

background-color: red;

}

.wrapper li:nth-child(3n-1){

background-color: blue;

}

.wrapper li:nth-child(3n){

background-color: yellow;

}

プレビュー

1つめ
2つめ
3つめ
4つめ
5つめ
6つめ
7つめ

CSSの中に3n・3n-1・3n-2の記述があります。
この場合のnは「倍数」と考えるとわかりやすいかと思います。
3nは3の倍数、
3n-1は3の倍数から1引いた数、
3n-2は3の倍数から2引いた数
となります。

先ほどの、奇数・偶数を指定する2n-1、2nについても
これと同じ考え方をすると理解できますね！
もちろん4以上の数でも応用できます。

n個目以降を指定する

先ほどと同じ3つ並びのリストを使って、
今度は最初の3つ以降の要素の背景を赤にしてみましょう。
HTMLは「nの倍数」の場合と共通です。

CSS

.wrapper li{
    display: inline-block;
    width: 30%;
    margin: 5px;
}
.wrapper li:nth-child(n+4){
    background-color: red;
}

.wrapper li{

display: inline-block;

width: 30%;

margin: 5px;

}

.wrapper li:nth-child(n+4){

background-color: red;

}

プレビュー

1つめ
2つめ
3つめ
4つめ
5つめ
6つめ
7つめ

CSSでn+4とあり、これが4番目以降を指定しています。
nに数字を当てはめて計算してみると、
0+4=4
1+4=5
2+4=6
3+4=7
・
・
・
な具合で、必ず4以上になることが理解できると思います。

まとめ

以上、CSSでn個目系擬似クラスを指定する方法を、-childと-of-typeの説明も交えて紹介しました。
擬似クラスはほかにもたくさんあるので、それぞれの特徴を踏まえて使い分けましょう！