nth-child은 많은 상황에서 매우 유용하지만, 이 경우에는 위험할 수 있다고 생각합니다. 숫자만 기반으로 하기 때문에, 이 방식을 사용하려면 배지가 항상 동일한 위치에 유지된다는 보장이 필요합니다.
배지 앞에 다른 요소가 추가되거나 삭제되거나 이동되면 배지의 위치가 바뀌게 되며, 이로 인해 배지가 노출되거나 다른 요소가 숨겨지는 문제가 발생할 수 있고, 이는 쉽게 발견되지 않을 수 있습니다.
:has()는 이 용도에 이상적이지만, 안타깝게도 아직 지원 범위가 제한적입니다. 특히 Firefox에서는 기본적으로 비활성화되어 있으며, 많은 모바일 브라우저에서는 지원하지 않습니다.
숨기는 것이 결정적으로 중요하지 않다면, 즉 :has()를 아직 지원하지 않는 브라우저에서는 표시되더라도 가능한 한 최고의 경험을 위해 숨길 수 있는 곳에서는 숨기는 것이 허용된다면, 다음 선택자를 사용할 수 있습니다:
sidebar-section-link-wrapper:has(a.sidebar-section-link-badges) { display: none; }