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

最初と最後の子要素を選択する際の CSS の問題に対処する

CSS を使用して最初と最後の子要素を選択する際に問題が発生した場合は、コンテキストを考慮することが重要です。あなたのコード。提供された Fiddle では、.area 要素は の直接の子です。タグ。ただし、:first-child および :last-child 疑似クラスを正しく適用するには、.area 要素がコンテナ内でネストされていることを確認することが重要です。

この問題に対処するには、コンテナ要素を周囲に追加します。 .area 要素。これにより、コンテナ内の位置に基づいて最初と最後の子要素を識別するための適切なコンテキストが提供されます。

コードの改訂版は次のとおりです。

.container {
  display: flex;
}

.area {
  height: 100px;
  width: 100px;
}

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

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

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

.container 内で .area 要素をネストすることにより、明確な階層を確立します。 :first-child および :last-child 疑似クラスは、.container.

の最初と最後の子要素を正確にターゲットにできるようになりました。

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