CSSで3列のブロックを作っています。
.
<ul>
<li>ブロック</li>
<li>ブロック</li>
<li>ブロック</li>
<li>ブロック</li>
<li>ブロック</li>
<li>ブロック</li>
</ul>
.
これをfloatで横並びにして3列にしています。図で書くと以下のような感じです。
■■■
■■■
.
これを「最後の行だけmargin-bottom:10pxを適用しない」という書き方はどうすればいいのしょうか?:last-child{margin-bottom:0;}だけだと適用されません。ちなみにul内のブロックの数は任意だとします。
みんなの回答 4 件
適用されないっつうかソース間違ってるし
これで行けると思う
li:nth-child(3n+1):nth-last-child(-n+3),
li:nth-child(3n+1):nth-last-child(-n+3) ~ li {
margin-bottom: 0;
}
愚直にそのままかけばいいと思うの。
2つ書くけど、要素が6個の場合は、どちらも同じ結果。
/*下から3つの要素*/
li:nth-last-child(-n+3){
margin-bottom: 0;
}
/*上から4つめ以降の要素*/
li:not(:nth-child(-n+3)){
margin-bottom: 0;
}
ulにネガティブマージンじゃだめですか?
関連するトピックス