CSSで最後の要素にだけスタイルを適用させない、疑似クラス「:not()」と「:last-of-type」の組み合わせは便利

疑似クラスを使いなせるようになると、CSSはより楽しくなります。

リストなど複数の兄弟要素を配置した時に、最後の要素にだけスタイルを適用しないようにするには、:not():last-of-typeを組み合わせると便利です。

下記のように最後だけラインをつけないとか、marginpaddingを変えるという時によく使用されるCSSのテクニックです。

CSSの疑似クラス「:not()」と「:last-of-type」の組み合わせ

CSSの疑似クラス:not():last-of-typeもすべてのブラウザ(IE含む)でサポートされています。

サイトのキャプチャ

:not()と:last-of-typeのサポート状況

さらにいろいろな使い方については、以前の記事をご覧ください。

まずは、実際の動作をご確認ください。
リストのアイテム間に点線があり、最後のアイテムにだけ点線がありません。

See the Pen
border between list items
by Joshua Comeau (@joshwcomeau)
on CodePen.

HTMLはシンプルです。

CSSもシンプルです。
:last-of-typeは最後の要素で、:not()は一致しない要素。つまり、最後ではない要素にborder-bottomのスタイルを適用します。

こういった兄弟要素の最後(もしくは最初)だけにスタイルを適用する方法は、ほかにもあります。フクロウセレクタ(* + *)を使用して定義することもできます。

フクロウセレクタは、あるアイテムに続くすべてのアイテムを選択するセレクタです。

元ネタは下記ツイートより。

sponsors

top of page

©2022 coliss