>웹 프론트엔드 >CSS 튜토리얼 >CSS에서 특정 클래스의 마지막 하위 요소를 선택하는 방법은 무엇입니까?

CSS에서 특정 클래스의 마지막 하위 요소를 선택하는 방법은 무엇입니까?

DDD
DDD원래의
2024-12-29 03:05:09923검색

How to Select the Last Child Element with a Specific Class in CSS?

CSS에서 특정 클래스가 있는 마지막 하위 요소 선택

CSS에서 특정 클래스가 있는 상위 요소의 마지막 하위 요소 타겟팅 이름은 속성 선택기를 사용하여 얻을 수 있습니다. 다음 HTML 마크업을 고려하십시오.

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list">test3</li>
    <li>test4</li>
</ul>

클래스 이름이 "list"인 마지막 하위 요소를 선택하려면 다음 CSS를 사용할 수 있습니다.

[class~='list']:last-of-type {
    background: #000;
}

CSS 선택기:

  • [class~='list']는 클래스 이름이 "list"인 모든 요소와 일치합니다. 클래스 이름은 첫 번째, 두 번째, 마지막 클래스 등 요소의 클래스 속성 내 어디에든 배치할 수 있습니다.
  • :last-of-type은 클래스와 일치하는 마지막 하위 요소를 선택합니다. 이전 선택자. 이렇게 하면 클래스 이름이 "list"인 마지막 하위 요소만 대상으로 지정됩니다.

속성 선택기 사용의 장점:

CSS 의사 클래스와 달리 :nth-child()와 같이 속성 선택기는 다음과 같은 장점을 제공합니다.

  • 상위 요소에서의 위치에 관계없이 요소.
  • 여러 클래스가 있는 요소를 대상으로 지정할 수 있습니다.

추가 리소스:

  • [W3Schools: :마지막 유형 선택기](https://www.w3schools.com/cssref/sel_lastoftype.asp)
  • [CSS-Tricks: 속성 선택기 이해](https://css-tricks.com/attribute-selectors/)

위 내용은 CSS에서 특정 클래스의 마지막 하위 요소를 선택하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.