ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS で最後の子を除くすべての子をターゲットにするにはどうすればよいですか?

CSS で最後の子を除くすべての子をターゲットにするにはどうすればよいですか?

Susan Sarandon
リリース: 2024-11-13 13:00:02
オリジナル
181 人が閲覧しました

How Can I Target All Children Except the Last One in CSS?

CSS 選択から最後の子を除外する

CSS で要素を選択する場合、n 番目の子セレクターにより、要素内の位置に基づいて正確にターゲットを指定できます。親要素。最後の子を選択するには、div:nth-last-child(1) を使用します。しかし、最後の子を除外したい場合はどうすればよいでしょうか?

解決策: Last-Child 擬似クラスの否定

CSS3 では否定擬似クラスが導入されています :not( ) を使用すると、特定の基準に一致する要素を除外できます。最後の子以外のすべてを選択するには、セレクターを使用します。

:not(:last-child)
ログイン後にコピー

この疑似クラスは、親の最後の子ではない要素に対して true と評価されます。その後、これらの要素をそれに応じてスタイル設定できます。

:not(:last-child) {
  /* styles */
}
ログイン後にコピー

互換性に関する注意

:not() 疑似クラスは Internet Explorer ではサポートされていないことに注意することが重要です。 8以下。これらのブラウザをサポートする必要がある場合は、nth-child(n) などのより詳細なセレクターを使用する必要がある場合があります。ここで、n は 0 以外の任意の数字です。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート