CSSで最後の要素以外にスタイルを適用させる方法!

CSSで最後の要素以外にスタイルを適用させる方法をサンプルコード付きで解説します。最後の要素は:last-childで指定できますが、「最後の要素以外」の指定の仕方を今回紹介します。

コンテンツ [表示]

  1. 1CSSで最後の要素以外にスタイルを適用させたい
  2. 2CSSで最後の要素以外にスタイルを適用させる方法

CSSで最後の要素以外にスタイルを適用させたい

CSSで兄弟要素のグループ内のの最後の要素を表す:last-childという擬似クラスがあります。例えば下記のサンプルコードを見てみましょう。

p:last-childという擬似クラス:last-childを使った指定によって、兄弟要素のグループ内の最後のp要素に対してテキストの色が赤になります。つまり上記のサンプルコードだと「段落3」という最後の要素だけテキストの色が赤になります。

このように「最後の要素」を指定できる:last-childですが、時に「最後の要素以外」を指定したい時があります。

今回は「最後の要素以外」の指定の方法についてサンプルコード付きで解説します。

CSSで最後の要素以外にスタイルを適用させる方法

CSSで最後の要素以外にスタイルを適用させたサンプルコードを見てみましょう。

上記のサンプルコードでは兄弟要素のグループ内で最後の要素である「段落3」以外のテキストの色が赤になっているのが確認できるかと思います。

「最後以外」という指定には同じく擬似クラスの:notを組み合わせて利用します。

p:not(:last-child) {
  color: red;
}

:notは否定擬似クラスと呼ばれ、引数のセレクタに一致しない要素を表します。

つまり今回は:last-childではない要素が対象となり、「最後の要素以外」が対象となります。

:notの使い方については下記を参考にしてみて下さい。

あわせて読みたい
:not()
CSSの:not()は否定擬似クラスと呼ばれ特定のセレクタを除外した要素を表す事が出来ます。:not()の使い方についてサンプルコード付きで解説していきます。
今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次