특정 CSS 요소에 타겟팅하는 방법은?

[Denis_Heraud]

특정 요소를 타겟으로 지정하여 그 속성을 수정하고 싶습니다(예를 들어):

.d-button-label { display: none !important;}

하지만 나중에 Discourse 전체에서 이 클래스가 사용되고 있으며, 제가 커스터마이즈하려는 플러그인 요소에서만 사용되는 것이 아니라는 사실을 알게 되었습니다. 그렇다면 해당 특정 라벨을 어떻게 타겟으로 지정해야 할까요?

[Johani (Joe)]

HTML 트리에서 위로 올라가서 고유한 클래스를 가진 부모 요소를 찾습니다.

그 다음 부모 요소를 셀렉터에 다음과 같이 추가할 수 있습니다.

.parent-class .child-class {
  display: none;
}

필요한 경우 다음과 같이 더 많은 고유한 부모 클래스를 추가할 수도 있습니다.

.grandparent-class .parent-class .child-class {
  display: none;
}

SCSS에서는 다음과 같이 작성할 수 있습니다.

.grandparent-class {
  .parent-class {
    .child-class {
      display: none;
    }
  }
}

이렇게 하면 !important를 사용할 필요가 없어집니다.

[Denis_Heraud]

고마워요, @Johani! 정말 유용하게 쓸 수 있는 새로운 걸 하나 배웠어요!