○番目を指定できる「:nth-child()」の便利な使い方！【CSS】

こんにちは！ラクです。

この記事では、○番目を指定してスタイルを適応できる「: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()」の使い方です。

これを使いこなせるようになると、まじでコードを書く量が減るのでおすすめの便利技です！