【CSS】疑似クラスnth-child(n)の変数nは0スタートなんですか？

タイトル見てもピンときませんよね。

来る方はWEB制作の方ですね。こんばんは。福井で活躍するマルチなSE小倉です。

この記事は、技術系の短い記事です。

一緒の開発メンバーであるY氏と「あれ、nって0だっけ？ 1だっけ？」っていうシーンがあったので、備忘録とした個人向け記事です。

記事内容は2分程度で読めます。

疑似クラスnth-child(n)って何？

一応技術を知らない方でも楽しく読めるように簡単な説明から入ります。

疑似クラスについて細かいことは下記のサイトで読んでいただく前提です^^

UX MILK：CSSにおける疑似クラスとは？

例えば、こんな感じのリストを表示するHTMLがあるとします。

HTMLとは文書構造を示すだけのものなので、原則的には意匠的なデザインは入れません。

これに、ある一定のルールで背景色をつけていくとしましょう。

背景色はCSSというスタイルシートで設定していきます。

このような時に便利なのが、疑似クラスの1つ「nth-child」です。

たとえばnth-child(3n)と指定すると・・・

このようになります。3の倍数行が灰色になりました。

※【補足】backgroundというプロパティが背景色、#cccというのRGBで表現した色です。

この時3nの時3、6の色が塗られるなら、n=1で3×1なのかなって思いこんでいる小倉です。

nは変数なので1×3=3、2×3=6と着色されたと予測。

n=1からスタート？

しかしnth-child(n+3)は・・・

このようになります。1と2行目が白っぺで、3行目以降が灰色になりました。

1+3=4、2+3=5、3+3=6、になると予想していたら、ちょっと違いました。

上でn=1？としていたなら1+3の4行目以降が灰色になるんじゃね？

って思っていたので、「ハテナ？」になりました。

しかし、n=0からのスタートなら0+3の3行目以降が灰色になるってことで、納得です。

n=0からのスタート？

しかし0×3=0ってHTMLには0の概念がないはずなんだが…？

で、結局どっちなんだ？

n=0なのか1なのか。これによって僕の理解は変わっちゃうわけなので、一大事。

困ったときはｇｇる（ぐぐる）。

下記のサイトを参考に。

UniLance：:nth-childの使い方

n は、0 から始まることを覚えといてください。

はい、確定。

n=0からのスタートということで、FIX（固定）です。

技術の知識はこういう細かいところの積み重ねなんですね。

今後はどや顔で「 nは0がスタートなんやで( -`ω-)どやっ 」って言いますｗ