CSS 의사 클래스를 사용하여 첫 번째 자식과 마지막 자식을 효과적으로 타겟팅하는 방법은 무엇입니까?

CSS에서 첫 번째 및 마지막 하위 항목을 타겟팅하는 방법

CSS를 사용하여 첫 번째 및 마지막 하위 요소를 선택하는 것은 까다로울 수 있습니다. -child" 및 "last-child" 의사 클래스는 상위 요소의 직계 하위 요소에 적용됩니다.

제공된 CSS 코드에서 다음을 타겟팅합니다. ".area" 클래스의 첫 번째 및 마지막 하위 요소는 컨테이너 요소의 직접적인 하위 요소가 아니기 때문에 작동하지 않습니다. 선택 작업을 수행하려면 컨테이너 요소를 추가하고 해당 하위 항목을 대상으로 지정할 수 있습니다.

다음은 컨테이너 요소를 포함하는 예입니다.

.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!