CSS에서 특정 클래스 없이 마지막 자식을 선택하는 방법은 무엇입니까?

CSS에서 :last-child와 :not(.class) 선택기 결합

특정 항목이 없는 마지막 자식 선택 클래스 속성은 간단한 작업처럼 보이지만 실제로는 어려운 작업입니다. CSS.

문제:

다음 HTML 구조를 고려하세요.

<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
<tr class="table_vert_controls"> ... </tr>

목표는 마지막 행인 세 번째 행을 선택하는 것입니다. "table_vert_controls" 클래스가 없는 자식입니다. 그러나 다음 선택기는 작동하지 않습니다.

tr:not(.table_vert_controls):last-child

CSS 선택기의 제한 사항:

:last-child를 포함한 CSS 선택기는 특히 마지막 자식을 대상으로 합니다. 요소의. 그러나 특정 클래스가 없는 요소의 마지막 하위 요소를 선택하는 데 동등한 의사 클래스는 없습니다.

선택기를 사용한 솔루션 4:

늦게 2015년 Selectors 4에서는 임의의 선택기를 인수로 전달할 수 있는 :last-child 확장 기능을 도입했습니다. 이렇게 하면 다음 선택기가 활성화됩니다.

tr:nth-last-child(1 of :not(.table_vert_controls))

브라우저 지원:

일부 브라우저에서 이 확장 기능을 구현하기 시작했지만 아직 널리 지원되지는 않습니다.

대체 솔루션:

이 확장까지 더 광범위하게 지원되며 대체 접근 방식은 다음과 같습니다.

• "table_vert_controls" 클래스 앞에 추가 클래스 추가
• jQuery 사용: $(tr:not(.table_vert_controls):last)

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