🩳

【CSS】最後だけ余白つけないCSSを最小限にする

2023/06/19に公開

はじめに

並んでいる最後の子要素にだけ余白付けたくないパターンって多いです。
大抵の場合、すべての子要素に余白を設定して、さらに最後の子要素だけ余白を消すような形で書くと思います。

よくあるやつ

.item {
  margin-bottom: 30px;
}
.item:last-child {
  margin-bottom: 0;
}

めんどくさいですよね？笑

:not()の擬似クラスを使えば短縮できます！
つまり、「最後の子要素以外の子要素」にあてるイメージですね〜

こんな感じ↓

&:not(:last-child) {
    margin-bottom: 30px;
}

実際に動かしてみた↓

削減量はちょっとだけどなんかスマートな感じにはなったでしょう！！！！！！