【css】最後の要素以外にスタイルを適用する方法

css

2020.02.23

リストなどで、最後のリストにはスタイルを適用したくない場合などがあると思います。

その場合の方法を説明します。

主に２パターンあります。

①最後の要素のスタイルを上書きする。

②最後の要素にのみスタイルがつかないようにCSSを記載する。

②の方法がおすすめです。

最後の「テストリスト３」以外の文字の色を赤にしたい場合、以下のようなCSSで実現できます。

①の方法

[サンプル]

ソースを紹介します。

[index.html]

<ul>
  <li>テストリスト１</li>
  <li>テストリスト２</li>
  <li>テストリスト３</li>
</ul>

[index.css]

ul li{
  color: red;
}
ul li:last-child{
  color: initial;
}

対象の要素に「:last-child」をつけると最後の要素にのみスタイルを指定できます。

イメージとしてはいったんすべての要素の文字を赤にした後に、最後の要素のみ上書きするという感じです。

※最初の要素を指定したい場合は「:first-child」です。

しかしこの方法は上書きという描画が発生します。

②の方法はこの上書きが発生しないので描画の回数が減るのでブラウザに少し優しいです。

[index.html]

<ul>
  <li>テストリスト１</li>
  <li>テストリスト２</li>
  <li>テストリスト３</li>
</ul>

[index.css]

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

「:not(:last-child)」とすることで最後の要素以外にスタイルが適用されます。

これで①のような上書きが発生せずに一発でスタイルを最後の要素以外に適用できます。