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

css

スポンサーリンク

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

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

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

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

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

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

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

①の方法

[サンプル]

  • テストリスト1
  • テストリスト2
  • テストリスト3

ソースを紹介します。

[index.html]

<ul>
  <li>テストリスト1</li>
  <li>テストリスト2</li>
  <li>テストリスト3</li>
</ul>

[index.css]

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

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

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

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

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

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

②の方法

  • テストリスト1
  • テストリスト2
  • テストリスト3

[index.html]

<ul>
  <li>テストリスト1</li>
  <li>テストリスト2</li>
  <li>テストリスト3</li>
</ul>

[index.css]

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

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

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

css

Posted by ton