ドロップダウン で選択されたカテゴリごとに色を変えたいです

Question

ドロップダウン で選択されたカテゴリごとに色を変えたいです。カテゴリの種類は8つです。
現在こちらのサイトでラベルを作成しています。

        <div class="card">
            <div class="card-body">
                        <span class="onsale-section">
                            <span class="onsale">
                                <b>{{ post.get_category_display }}</b>
                            </span>
                        </span>
            </div>
        </div>

.card {
  width: 300px;
  font-family: sans-serif;
  margin: 2%;
}

.card-body {
  margin-bottom: 10px;
  position: relative;
  min-height: 250px;
}

.onsale-section {
  position: absolute;
  top: -6px;
  right: 15px;
}

.onsale-section:after {
  position: absolute;
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 6px solid #6ec5d5;
}

.onsale {
  position: relative;
  display: inline-block;
  text-align: center;
  background: #6ec5d5;
  font-size: 14px;
  line-height: 1;
  padding: 12px 8px 6px;
  border-top-right-radius: 8px;
  width: 84px;
  text-transform: uppercase
}

.onsale:before,
.onsale:after {
  position: absolute;
  content: '';
  display: block;
}

.onsale:before {
  background: #6ec5d5;
  height: 7px;
  width: 6px;
  left: -6px;
  top: 0;
}

.onsale:after {
  background: #96a0a2;
  height: 7px;
  width: 8px;
  border-radius: 8px 8px 0 0;
  left: -8px;
  top: 0;
}

.card img {
  display: block;
}

{{ post.get_category_display }}の中には選択したカテゴリ名が入っています。

例えば、{{ post.category }}で番号が取得されるのでその番号をidなどに入れて、その番号分をCSSで作成して設定しないといけないのでしょうか？
もっと簡単なやり方があればアドバイスいただけると嬉しいです。
何か必要な物があれば追記致します。よろしくお願いいたします。

Answer 1

番号をidなどに入れて、その番号分をCSSで作成

多分それが１番早いです。

<b id="ctg_{{ post.category }}">{{ post.get_category_display }}</b>

#ctg_1{
  color: ・・・;
}
#ctg_2{
  color: ・・・;
}
```こんな感じ。

Comments

[Mario_11]

なるほど！
ありがとうございました！！