CSS `:last-child` 선택기는 어떻게 작동하며 대안은 무엇입니까?

CSS :last-child 선택기 특정성

배경:

:last-child 선택기는 마지막 하위 요소를 대상으로 합니다. 특정 상위 요소의 그러나 하위 요소는 해당 컨테이너의 가장 마지막 요소여야 합니다.

설명:

다음 CSS 선택기를 고려하세요.

li.complete:last-child {
  background-color: yellow;
}

이 선택기는 뒤에 다른 요소가 있는 경우 "완전" 클래스가 있는 마지막 요소에 지정된 스타일을 적용하지 않습니다. 예를 들어, 제공된 HTML에서:

<ul>
  <li class="complete">1</li>
  <li class="complete">2</li>
  <li>3</li>
  <li>4</li>
</ul>

:last-child 선택기는 목록의 마지막 요소가 아니기 때문에 두 번째 "완전한" 목록 항목에 노란색 배경을 적용하지 않습니다.

대안:

특정 클래스의 마지막 요소에 스타일을 적용해야 하는 경우 컨테이너 내 위치를 확인하려면 대신 :last-of-type을 사용할 수 있습니다.

li.complete:last-of-type {
  background-color: yellow;
}

이 선택기는 뒤에 다른 요소가 있더라도 "완전" 클래스와 일치하는 마지막 요소를 대상으로 합니다.

또한 "n번째 하위" 선택기를 사용하여 특정 유형의 마지막 요소를 대상으로 지정할 수 있습니다.

ul :nth-child(4) {
  background-color: yellow;
}

이렇게 하면 클래스에 관계없이 네 번째 목록 항목을 선택하세요.

jQuery 고려 사항:

jQuery 선택기 $("li.complete:last-child")는 작동하지 않습니다. 왜냐하면 부모 요소의 가장 마지막 요소를 찾기 때문입니다. jQuery를 사용하여 특정 클래스의 마지막 요소를 대상으로 지정하려면 "last" 함수를 사용할 수 있습니다:

$("li.complete").last();

결론:

:last-child 선택기 요소가 상위 요소의 마지막 하위 요소여야 합니다. 그렇지 않은 경우 :last-of-type 또는 "nth-child"가 더 적합한 옵션을 제공할 수 있습니다.

위 내용은 CSS `:last-child` 선택기는 어떻게 작동하며 대안은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!