CSS 疑似クラスで最初と最後の子を効果的にターゲットにする方法は?

CSS で最初と最後の子要素をターゲットにする方法

CSS を使用して最初と最後の子要素を選択するのは難しい場合があります。 -child" および "last-child" 擬似クラスは、親要素の直接の子に適用されます。

「.area」クラスの最初と最後の子要素をターゲットとする提供された CSS コードは、要素がコンテナ要素の直接の子ではないため機能しません。選択を機能させるには、コンテナ要素を追加し、その子をターゲットとして指定します。

コンテナ要素を含む例を次に示します。

.container {
  display: flex;
}

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

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

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

この変更により、 、「.area」要素は「.container」要素の直接の子になり、「first-child」および「last-child」疑似クラスを使用して最初と最後を選択できます。最後の子要素も同様です。

以上がCSS 疑似クラスで最初と最後の子を効果的にターゲットにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。