:last-of-type 선택기 동작

:last-of-type 의사 클래스는 지정된 유형의 마지막 요소를 대상으로 합니다. 상위 컨테이너 내에서. 그러나 CSS 선택기(p.visible:last-of-type)의 맥락에서 :last-of-type은 클래스 인스턴스가 아닌 요소 유형에만 적용된다는 점에 유의하는 것이 중요합니다.

HTML 마크업:

  
This should be hidden
  
This should be displayed
  
This should be hidden

:last-of-type이 마지막

요소를 대상으로 하기 때문에 문제가 발생합니다. 이 경우에는 .visible 클래스가 없습니다. 결과적으로

요소가 표시되지 않습니다.

해결책

.visible 클래스로 마지막

요소를 타겟팅하려면 JavaScript를 사용해야 합니다. 이 특정 목적을 위한 내장 CSS 선택기가 없기 때문입니다.