こんにちは!ラクです。
この記事では、○番目を指定してスタイルを適応できる「:nth-child()」について解説します。
目次
:nth-child()の使い方
基本的な使い方
基本的な使い方は、セレクタの後に「:nth-child(○)」を付けて、○番目の要素を指定します。
では、サンプルを作ってきたので、見て下さい!

緑色の四角形を10個作りました。四角形には、全て「box」とクラス名をつけています。
試しに、5番目の四角の色を変えて見ます。
.box:nth-child(5) {
background: #e35369;
}

すると、5番目の四角だけちゃんと色が変わりました!
これが、一番基本的な使い方です。
倍数で指定する
次は、倍数で指定する方法を紹介します!
では、今回は3の倍数の四角だけ色を変えていきます。
.box:nth-child(3n) {
background: #e35369;
}

これで、3の倍数の、3、6、9番目の四角だけ色が変わりました!
倍数で指定するときは、「n」を使います。覚えておくと便利だと思います!
奇数、偶数で指定する
お次は、奇数と偶数で指定する方法です。
これは、とても使う場面があると思います!
では、まず奇数から色を変えていきます。
.box:nth-child(odd) {
background: #e35369;
}

無事、奇数番目の四角だけ色が変わりました!
次は、偶数の色を変えていきます。
.box:nth-child(odd) {
background: #e35369;
}

ちゃんと、偶数番目の四角が変わりました!
奇数は「odd」、偶数は「even」を使います。
oddは聴き慣れない英語ですが、「オッドアイ(odd eye)」に使われてたりします。
以上が、「:nth-child()」の使い方です。
これを使いこなせるようになると、まじでコードを書く量が減るのでおすすめの便利技です!