カテゴリー
css

cssクラスタで偶数番目や奇数番目、3の倍数などに適用させる方法

便利なcssクラスタ。
偶数番目や奇数番目などの要素だけに適用したり、3の倍数の要素だけに適用したりできる。
よくリストタグで横並びにするときに端だけmarginを0にしたりとか使える。

ulタグとかで3の倍数番目のliだけmarginをなくすといった方法

li:nth-child(2n) { /* 偶数番目*/
   margin:0px;
}

li:nth-child(2n+1) {  /* 奇数番目*/
   margin:0px;
}

li:nth-child(3n) {   /* 3の倍数 */
   margin:0px;
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です