CSSで未解決のトピックをターゲットにするにはどうすればよいですか？

開発
,
1

未解決トピックのスタイルを変更するためのCSSセレクターは何ですか？

「いいね！」 1
2

こんにちは、ダン :wave:

トピックリストでは、次のようになります。

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

image
image1099×795 69.4 KB

トピックページでは、ターゲットにできる特定のクラスはありません。

「いいね！」 4
3

ありがとうございます、うまくいきました！

ただし、この問題と同様に、status-solved クラスの不在を検索すると、Solved が有効になっていないカテゴリのトピックも強調表示されてしまいます。当社の場合は、サポートカテゴリのみを対象とするためにセレクタに 2 番目のクラスを追加しました。

/* 未解決のトピックを強調表示 */
.topic-list-item.category-support:not(.status-solved) {
    background: rgba(255,192,203,.2);
}

セレクタを繰り返すのではなく、より一般的な解決策はありますか？たとえば、さらに多くの Solved カテゴリが存在する場合などです。

「いいね！」 1
4

解決済みのカテゴリに対するワイルドカード条件を見つけようとしましたが、できませんでした。ただし、関連するすべてのカテゴリを1つのコードスニペットにまとめることができます。

 /* 未解決のトピックをハイライト */

.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:

5

トピックリストで「解決可能」カテゴリに属するトピックを特定できるかどうかわかりません。

毎週カテゴリ設定を変更しないのであれば、あなたと@Lillyさんが書いたコードを変更し、ループを追加して、読みやすく保守しやすくすることができます。引き続きカテゴリクラスを使用します。

このインテントに対するこちらの解決策を再利用できます。

「いいね！」 1
6

こんにちは :wave:

トピックリストの解決可能なトピックに .solvable-topic クラスを追加するテーマコンポーネントを作成しました。

このテーマコンポーネントをインストールした後、簡単な CSS を追加することで実現できます。 :slightly_smiling_face:

.topic-list-item {
  &.solvable-topic {
    &:not(.status-solved) {
      background: red;
    }
  }
}
「いいね！」 5