CSS で最後の子を除くすべての子をスタイルするにはどうすればよいですか?

CSS を使用して最後の子以外の子を選択する

Web 開発では、特に CSS を使用して、最後の子を除く要素のすべての子にスタイルを適用します。これは、CSS セレクター レベル 3 の否定擬似クラスを使用して実現できます。

構文:

:not(:last-child) { /* styles */ }

仕組み:

:not() 疑似クラスを使用すると、指定したセレクターに一致する要素を除外できます。この場合、これを使用して、最後の子要素を選択する :last-child 擬似クラスを無効にします。

例:

次の HTML 構造を考えてみましょう。 :

<div>
  <div>First child</div>
  <div>Second child</div>
  <div>Third child</div>
</div>

最後の子を除くすべての子のスタイルを設定するには、次の CSS を使用できます:

:not(:last-child) {
  background-color: blue;
}

これにより、最初の 2 つの子には青色の背景色が適用されますが、そうではありません。 3 番目の子。

互換性:

:not() 疑似クラスは Internet Explorer 8 以前のブラウザではサポートされていないことに注意してください。

以上がCSS で最後の子を除くすべての子をスタイルするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。