CSS を使用して最初と最後の子要素を正しく選択するにはどうすればよいですか?

CSS で最初と最後の子を選択する: コンテキストを理解する

CSS で最初と最後の子を選択するには、コンテキストを明確に理解する必要があります。 CSS が適用されるコンテキスト。指定された HTML および CSS スニペットで示されているように、:first-child および :last-child 擬似クラスを .area 要素に直接適用すると、期待どおりの結果が得られない可能性があります。これは、これらの疑似クラスが指定された親要素の最初と最後の子のみを選択するためです。

指定された例では、.area 要素は HTML 構造内の指定された親要素の子ではありません。これらは body 要素の直接の子であり、スクリプト タグや動的に追加されたコンテンツなどの他の要素が含まれる場合があります。

.area 要素の最初と最後の子を正しく選択するには、コンテナ要素を導入する必要があります。独自のクラスを持つ div などの別の要素内で .area 要素をラップすることにより、疑似クラスはそのコンテナ内の最初と最後の子を正確にターゲットにすることができます。

これは、正しいことを示す変更された HTML 構造です。使用法:

<div class="container">
  <div class="area">1</div>
  <div class="area">2</div>
  <div class="area">3</div>
  <div class="area">4</div>
</div>

この構造では、次の CSS は最初と最後の .area を正しく選択します。 Children:

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

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

コンテナ要素を親セレクターとして指定することで、CSS はそのコンテキスト内の .area 要素の最初と最後の子を正確にターゲットにできるようになりました。

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