CSS で最初と最後の子要素を確実に選択するにはどうすればよいですか?

CSS の最初と最後の子の選択クエリ

CSS を使用して最初と最後の子要素を選択しようとすると、:first-child および :last-child 疑似特にターゲット要素が body 要素の直接の子である場合、クラスは期待どおりに動作しない可能性があります。

この問題に対処するには、次のことをお勧めします。ターゲット要素をコンテナ要素内にラップします。そうすることで、最初と最後の子疑似クラスをコンテナ内のターゲット要素に適用できます。

.container {
  /* Style rules for the container element */
}

.container .area:first-child {
  background-color: red;
}

.container .area:last-child {
  background-color: green;
}

このソリューションでは、.container 要素は、最初と最後の子疑似クラスを選択するための参照ポイントとして機能します。最後の子要素。これにより、疑似クラスがそのコンテナ内のターゲット要素に正しく適用されることが保証されます。

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