CSSで最後の要素を除く要素のすべての子を選択するにはどうすればよいですか?

最後の子を除く要素のすべての子を選択する

CSS セレクターを使用して要素を選択することは、Web ページのスタイルを設定し、操作するための強力なテクニックです。一般的なタスクの 1 つは、要素の最後の子を除くすべての子を選択することです。

:last-child セレクター

要素の最後の子のみを選択するには、 :last-child セレクターを使用できます。このセレクターは、親要素の最後の子である要素のみに一致します。例:

div:nth-last-child(1) {
  /* styles */
}

最後以外のすべての子を選択

要素の最後の子を除くすべての子を選択するには、:not() 否定擬似クラスを使用します。 :last-child 疑似クラスと組み合わせることができます。 :not() 疑似クラスは、指定された条件に一致しない要素と一致します。この場合、条件は :last-child です。これは、:not() 擬似クラスが、親要素の最後の子ではないすべての要素と一致することを意味します。

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

このセレクターは、最後の子を除く、親要素のすべての子と一致します。セレクターに適用されるスタイルは、一致したすべての要素に適用されます。

互換性

:not() 疑似クラスはサポートされていないことに注意することが重要です。 IE8 またはそれ以前のバージョンの Internet Explorer。 :not() をサポートしないブラウザの場合は、n 番目の子セレクターや子コンビネータを使用するなど、最後の子を除くすべての子を選択する代替メソッドを使用できます。

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