CSS로 '미해결' 토픽을 선택하는 방법은 무엇인가요?

미해결된 주제의 스타일을 변경하려면 어떤 CSS 선택자를 사용해야 하나요?

안녕하세요, Dan :wave:

토픽 목록에서는 이렇게 사용할 수 있습니다:

.topic-list-item:not(.status-solved) {
    background: rgba(255,192,203,.2);
}

토픽 페이지에는 특정할 클래스가 없습니다.

고맙습니다. 작동했습니다!

다만, 이 문제와 유사한 한 가지 주의할 점이 있습니다. status-solved 클래스가 없는 것을 찾는 것은, 해결(Solved) 기능이 활성화되지 않은 카테고리의 주제들도 함께 하이라이트되게 만듭니다. 저희 경우를 보면, 지원 카테고리만 대상으로 하도록 셀렉터에 두 번째 클래스를 추가했습니다:

/* 미해결된 주제 하이라이트 */
.topic-list-item.category-support:not(.status-solved) {
    background: rgba(255,192,203,.2);
}

셀렉터를 반복하지 않고, 해결(Solved) 카테고리가 더 많이 존재할 경우를 대비한 더 일반적인 해결책이 있을까요?

모든 카테고리에서 solved가 활성화된 경우를 위한 와일드카드 조건을 찾아보려 했으나 실패했습니다. 대신 관련 카테고리를 모두 하나의 코드 스니펫으로 결합할 수 있습니다:

 /* 미해결된 주제 강조 */
 
.topic-list-item.category-support, 
.topic-list-item.category-another_category,
.topic-list-item.category-yet_another_category:not(.status-solved) {
    background: rgba(255,192,203,.2);
}

또는 테마 컴포넌트를 만들어 적용할 카테고리를 설정할 수 있는 옵션을 추가하는 방법도 있습니다. solved가 활성화된 카테고리를 대상으로 하는 방법이 있을 것 같지만, 어떻게 해야 하는지 도저히 알 수가 없습니다. :thinking:

주제 목록에서 “해결 가능한” 카테고리에 속하는 주제들을 어떻게 가져올지 확실하지 않습니다.

매주 카테고리 설정을 변경할 계획이 없다면, @Lilly와 함께 작성한 코드를 수정하여 루프를 추가하고 가독성과 유지보수성을 높일 수 있습니다. 이 경우에도 여전히 카테고리 클래스를 사용합니다.

이 목적을 위해 다음에 제공된 솔루션을 재사용할 수 있습니다:

안녕하세요 :wave:

토픽 목록에서 해결 가능한 토픽에 .solvable-topic 클래스를 추가하는 테마 컴포넌트를 만들었습니다.

이 테마 컴포넌트를 설치한 후 간단한 CSS를 추가하여 이를 구현할 수 있습니다. :slightly_smiling_face:

.topic-list-item {
  &.solvable-topic {
    &:not(.status-solved) {
      background: red;
    }
  }
}