しんぺー 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ですが、いざ使いたい時に困りそうなので記事にしてみました。
僕と同じ悩みを抱えた方の助けになっていれば幸いです。
最後までありがとうございました。