否定擬似クラス「:not()」を使って最後の要素以外にスタイルを反映させる方法

例えばリストの最後だけにはborderを入れたくないとか、よくありますよね。
そんな時よくあるのが、まずli要素にスタイルを適用し、その上で最後の要素にスタイルを上書きするような書き方ですが、否定擬似クラス「:not()」を使うと効率的にスタイルを適用することができます。

「`:last-child`」で最後の要素のスタイルを上書きして無効にする

<ul>
  <li>リスト01</li>
  <li>リスト02</li>
  <li>リスト03</li>
  <li>リスト04</li>
  <li>リスト05</li> <!--最後の要素-->
</ul>

li {
  border-bottom: 1px solid #000;
}

li:last-child {
  border-bottom: none;
}

最後の要素のborderのみ無効になります。
ただこれだとちょっと手間だし、わずかではあるけどスタイルが上書きされるわけなので余分な描画となってしまいブラウザにも負荷がかかる。
これを効率的に書くには否定擬似クラスの「:not()」を使います。

li:not(:last-child) {
  border-bottom: 1px solid #000;
}

「:not(:last-child)」と書くことでリストの最後の要素以外にborder-bottomが適用されます。

¥2,585 （2025/08/14 11:41時点 | Amazon調べ）

ポチップ