🗒️

【CSS】特定クラスの最後の要素を指定する

に公開2件
CSS
HTML
Sass
Scss
tech

はじめに

CSSを使って最後の要素をスタイリングしたい場合、疑似クラスの:last-of-typeや:last-childがまず思い浮かびます。しかし、これらを特定のクラスに絞る場合には、別の方法が必要でした。:hasを活用して実現する方法を備忘録として残します。

コード例

以下は、Sassでborder-bottomを条件付きで設定する例です。

.item {
  border-bottom: 1px solid black;

  &:not(:has(~ .item)) {
    border-bottom: none;
  }
}

解説

:not(:has(~ .item))の構造

この部分は、CSSの疑似クラスを組み合わせて特定条件を指定しています。

  • :has()
    指定したセレクターを子孫や隣接要素に持つかどうかを判定します。

  • :not()
    条件に一致しない要素を選択します。

  • ~ .item
    隣接する.itemを指定します。

つまり、この条件は「隣接する.itemが存在しない場合」に該当します。この構文を利用することで、最後の要素のみスタイリングを変更できます。

実際の利用シーン

例えば、項目リストを表示する際、最後の項目だけ下線を非表示にしたい場合に利用できます。

HTML例

<div class="item">問題1</div>
<div class="item">問題2</div>
<div class="item">問題3</div>

このようなHTML構造に対し、上記のSassを適用すると、最後の<div>である「問題3」だけ下線が引かれなくなります。

まとめ

CSSの:has()を利用することで、特定クラスに基づいた最後の要素を柔軟にスタイリングできます。これにより、従来の:last-childや:last-of-typeでは対処しづらかったケースにも対応可能です。

ポイント

  • :has()は要素の子孫や隣接要素を条件として指定できる強力な疑似クラス。
  • :not()と組み合わせることで、条件に一致しない要素を選択できる。

追記（2025/01/09）

コメントで指摘の通り、このパターンであれば:nth-last-child(1 of .item)で実現できますね😅
これの方が楽かもです😂

.item:nth-last-child(1 of .item) {
  border-bottom: none;
}
:not(:has(~ .item)) :nth-last-child(1 of .item)
目的 特定の要素の子孫に特定の条件を満たす要素がない場合。 特定のセレクタのグループで最後の要素を選択。
使用する状況 子孫に条件が存在しない要素に適用したい場合。 特定のグループの最後の要素に適用したい場合。
動作する対象 子孫要素全体を参照。 子要素の中で特定のグループに属するものを参照。

参考

https://developer.mozilla.org/ja/docs/Web/CSS/:has
https://qiita.com/forty4_jp/items/79276e2771f12248d865

Discussion