CSS에서 특정 클래스가 없는 마지막 하위 항목을 선택하는 방법은 무엇입니까?

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

CSS에서는 여러 기준에 따라 특정 요소를 선택해야 하는 경우가 종종 있습니다. 그러한 경우 중 하나는 특정 클래스가 없는 마지막 자식을 선택하는 것입니다. 간단해 보일 수도 있지만 :last-child 및 :not(.class) 선택기만 사용하면 원하는 결과를 얻을 수 없습니다.

:last-child 및 :not(.class) 사용

:last-child 선택자는 요소의 마지막 하위 항목을 대상으로 하는 반면, :not(.class)는 지정된 클래스가 없는 요소를 선택합니다. 그러나 이러한 선택기를 직접 결합하여 원하는 효과를 얻을 수는 없습니다.

다음 예를 고려하십시오.

<tr>

목표는 "table_vert_controls"가 없는 세 번째 행을 선택하는 것입니다. " 수업. 다음 CSS 규칙은 작동하지 않습니다.

tr:not(.table_vert_controls):last-child

이 규칙은 "table_vert_controls" 클래스 유무에 관계없이 마지막 행을 선택합니다.

대체 솔루션

CSS 선택자만으로는 이 특정 조합을 처리할 수 없으므로 대체 솔루션은 다음과 같습니다. 필수:

• 추가 클래스 사용: "last-child-no-class"와 같이 원하는 클래스 앞에 요소에 추가 클래스를 추가합니다. 그런 다음 다음 규칙을 사용합니다.

.last-child-no-class:not(.table_vert_controls)

• jQuery 선택기: jQuery의 더욱 강력한 선택기 엔진을 활용하여 원하는 요소를 선택합니다.

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

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