エンジニアの卵_level1

【毎日更新!】新卒2年目エンジニアブログです! プログラムだけじゃなく、マネジメントとかも書いていきたい!

5番目や◯◯番目のliにCSSをかける方法【116日目】

liを横並びにさせる時にこんなことありませんか

3番目と6番目だけに marginをかけたい・・・
4番目以降に margin-topをかけたい・・・

とか。私はありました。

前まではfor文で個数数えてCSS書いてました。

参考サイト

csspro.digitalskill.jp

:nth-childというものがある

:nth-childというものがあって、

n番目の子要素にCSSをかけるってことですね。

li:nth-child(n+4) {
    margin-top: 5px;
}

こんな風に書くと、4番目のliからmargin-topがかかります。

nが0,1,2,3...と増えていくので、
(4)(5)(6)...となるわけですね。

3の倍数の時に◯◯

アホになる・・・とか昔ありましたね。

li:nth-child(3n) {
    margin-top: 5px;
}

これでよし。

li:nth-child(3n+2) {
    margin-top: 5px;
}

こうすると、2,5,8...みたいにも出来ます。

日記

いつか例を書いてリライトしようと思った。

80記事も技術記事貯まってるから、全部リライトするのはすっごく骨が折れそう。