CSS を使用して最初と最後の子要素を正しくスタイル設定するにはどうすればよいですか?

CSS を使用した最初と最後の子要素の選択

Web ページ上の特定の子要素の選択は、CSS 疑似クラスを使用して実現できます。ただし、最初または最後の子を選択しようとすると、潜在的な問題が発生します。

よくある落とし穴は、親コンテナを考慮せずに子要素に直接スタイルを定義することです。次の例を考えてみましょう。

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

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

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

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

このシナリオでは、CSS は最初と最後の子要素に必要なスタイルを適用しません。これは、これらの要素がエリア クラスを持つ親の直接の子ではないためです。この問題を修正するには、子要素を別の親要素内でラップする必要があります:

.container {
  . . .
}

.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>

この変更により、CSS ルールがコンテナ要素内の最初と最後の子要素に適用されます。親コンテナ内で要素をラップすることにより、ターゲットの子要素の特定のコンテキストを定義し、そのコンテナ内の位置に基づいて要素を正確にスタイル設定できるようになります。

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