CSS에서 특정 클래스 없이 마지막 하위 요소를 선택할 수 있습니까?

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

CSS에서 마지막 하위 요소를 선택할 수 있나요? 지정된 클래스가 부족합니까? 예를 들어 다음 HTML 구조를 고려해 보세요.

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

CSS 선택기를 사용하여 어떻게 네 번째 행만 선택할 수 있습니까? 다음 선택기를 사용하려고 시도하는 것만으로는 충분하지 않습니다.

tr:not(.table_vert_controls):last-child

안타깝게도 CSS 선택기만으로는 이를 달성할 수 없습니다. :last-child 의사 클래스는 구체적으로 다음을 대상으로 합니다. 그리고 이에 필적할 만한 :last-of-class 의사 클래스는 없습니다.

2015년 현재 Selectors 4는 :nth-child() 및 :nth-last-child()에 대한 확장을 도입했습니다. 선택기, 임의의 선택기를 인수로 사용할 수 있습니다. 이렇게 하면 다음 구문이 허용됩니다.

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

그러나 2018년 4월 현재 Safari에서만 이 기능을 지원하므로 광범위한 호환성을 확보하려면 아직 몇 년이 걸립니다.

대체 접근 방식:

그동안 대체 방법을 사용해야 합니다.

• 추가 클래스 추가: 대상 클래스 바로 앞에 클래스를 추가한 다음 새 클래스의 마지막 하위 항목을 선택합니다.
• jQuery 선택기: jQuery 선택기 사용:

$('tr:not(.table_vert_controls):last')

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