Какой селектор (или селекторы) CSS использовать для изменения стиля нерешённых тем?
Спасибо, это сработало!
Один нюанс, похожий на эту проблему, заключается в том, что поиск по отсутствию класса 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);
}
Или можно создать компонент темы и добавить настройку для выбора любых категорий, к которым нужно применить это правило. Подозреваю, что способ таргетинга категорий с включённой функцией «решено» может существовать, но я пока не могу его найти. ![]()
Я не уверен, что мы можем определить, какие темы относятся к категории «решаемые» в списке тем.
Если вы не планируете менять настройку категории каждую неделю, вы можете модифицировать код, который вы и @Lilly написали: добавить цикл, чтобы сделать его более читаемым и поддерживаемым. Он по-прежнему будет использовать классы категорий.
Вы можете повторно использовать решение, предложенное здесь по этому вопросу:
Привет ![]()
Я создал компонент темы, который добавляет класс .solvable-topic к темам в списке решаемых тем.
После установки этого компонента темы вы можете добавить простой CSS, чтобы это работало. ![]()
.topic-list-item {
&.solvable-topic {
&:not(.status-solved) {
background: red;
}
}
}
