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