3番目、7番目、11番目の要素にスタイルを当てたい人
![](https://sinpe-pgm.com/wp-content/uploads/2022/01/computer_tokui_boy-150x150.png)
3、7、11番目の要素にスタイルを当てたいから〜
えーっとnth-child
で〜
どうやるんだっけ?
![](https://sinpe-pgm.com/wp-content/uploads/2022/12/DSC02647-e1672070436919-150x150.jpg)
しんぺー
ぼくも「え?どうやるんだ?」と悩んだので、メモに残しておきます。
タイトルにも書きましたが、nth-child(4n+3)
です。
一応CodePenで表示させていますので、気になる方は見ていってください。
指定するCSS
![](https://sinpe-pgm.com/wp-content/uploads/2023/02/Button-style-bro-644x644.png)
こちらです。
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の解説|こんなカンタンなんです。
![](https://sinpe-pgm.com/wp-content/uploads/2023/02/Online-learning-bro-644x644.png)
パッと見ややこしいですが、この説明でスッキリすると思います。
4n
= 4つの要素ごとにピックアップする3
= 3番目の要素を選ぶ
ただそれだけ。
では、:nth-child(3n+4)
はどうなるでしょう?
気になった方はぜひ調べてみてください。
最後に
![](https://sinpe-pgm.com/wp-content/uploads/2023/02/Forest-bro-644x644.png)
今回はあまり出番のないCSSですが、いざ使いたい時に困りそうなので記事にしてみました。
僕と同じ悩みを抱えた方の助けになっていれば幸いです。
最後までありがとうございました。