liを横並びにさせる時にこんなことありませんか
3番目と6番目だけに marginをかけたい・・・
4番目以降に margin-topをかけたい・・・
とか。私はありました。
前まではfor文で個数数えてCSS書いてました。
参考サイト
http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/nth-child%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9/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記事も技術記事貯まってるから、全部リライトするのはすっごく骨が折れそう。
