3,7,11,15を指定するCSSは？ nth-child(4n+3)です。

  • 投稿日
  • 更新日
  • 著者 アバター しんぺー
  • カテゴリー CSS

3番目、7番目、11番目の要素にスタイルを当てたい人

3、7、11番目の要素にスタイルを当てたいから〜
えーっとnth-childで〜

どうやるんだっけ？

しんぺー

ぼくも「え？どうやるんだ？」と悩んだので、メモに残しておきます。
タイトルにも書きましたが、nth-child(4n+3)です。

一応CodePenで表示させていますので、気になる方は見ていってください。

指定するCSS

こちらです。

ul{
  >li:nth-child(4n+3) {
    background: #ddd;
  }
}

下のCodePenでも確認いただけると思います。
4n+3の意味が知りたい方向けに、後ほど解説しますね。意外とカンタンなんです。

See the Pen 3,5,7,11等差数列【nth-child(4n+3)】 by shimpei (@shimpei) on CodePen.

4n+3の解説｜こんなカンタンなんです。

パッと見ややこしいですが、この説明でスッキリすると思います。

  • 4n = 4つの要素ごとにピックアップする
  • 3 = 3番目の要素を選ぶ

ただそれだけ。

では、:nth-child(3n+4)はどうなるでしょう？
気になった方はぜひ調べてみてください。

最後に

今回はあまり出番のないCSSですが、いざ使いたい時に困りそうなので記事にしてみました。
僕と同じ悩みを抱えた方の助けになっていれば幸いです。

最後までありがとうございました。