CSS:last-childより「last-child以外」の方がブラウザにやさしい

goto_jp 94views 更新:2017年11月9日

たとえば「リストが最後の時」にスタイルを変化させたい時、以下の書き方がよくあります。

li {
    margin-bottom: 20px;
}
li:last-child {
    margin-bottom: 0;
}

「平常時」と「last-childの時」の書き分けです。

これを「last-child以外の時」に書き換えます。

li:not(:last-child) {
    margin-bottom: 20px;
}

前者の書き方ように margin-bottom:0 で上書きすることが無いので、ブラウザ描画が減りやさしくなります。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません