Как мне выбрать темы «Не решено» с помощью CSS?

Какой селектор (или селекторы) CSS использовать для изменения стиля нерешённых тем?

Привет, Дан :wave:

В списке тем это будет выглядеть так:

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

На странице темы нет конкретного класса, к которому можно было бы обратиться.

Спасибо, это сработало!

Один нюанс, похожий на эту проблему, заключается в том, что поиск по отсутствию класса status-solved приводит к тому, что подсвечиваются и темы из категорий, где функция «Решено» не включена. В нашем случае я добавил второй класс к селектору, чтобы нацеливаться только на категорию поддержки:

/* Подсветка нерешённых тем */
.topic-list-item.category-support:not(.status-solved) {
    background: rgba(255,192,203,.2);
}

Существует ли более универсальное решение, например, если появятся дополнительные категории с функцией «Решено», чтобы не дублировать селектор?

Я пытался придумать условие с подстановочным знаком для любой категории с включённой функцией «решено», но не смог. Однако вы можете объединить все соответствующие категории в один фрагмент кода:

 /* Подсветка нерешённых тем */
 
.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);
}

Или можно создать компонент темы и добавить настройку для выбора любых категорий, к которым нужно применить это правило. Подозреваю, что способ таргетинга категорий с включённой функцией «решено» может существовать, но я пока не могу его найти. :thinking:

Я не уверен, что мы можем определить, какие темы относятся к категории «решаемые» в списке тем.

Если вы не планируете менять настройку категории каждую неделю, вы можете модифицировать код, который вы и @Lilly написали: добавить цикл, чтобы сделать его более читаемым и поддерживаемым. Он по-прежнему будет использовать классы категорий.

Вы можете повторно использовать решение, предложенное здесь по этому вопросу:

Привет :wave:

Я создал компонент темы, который добавляет класс .solvable-topic к темам в списке решаемых тем.

После установки этого компонента темы вы можете добавить простой CSS, чтобы это работало. :slightly_smiling_face:

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