select2を使ったセレクトボックスで要素ごとに色を変えたい

Question

#わからないこと、やったこと
jQueryのselect2を使ったセレクトボックスを実装しており、その要素ごとに文字色を変えたいと思っています。

• styleタグで直接記述
• cssから!importantをつけて記述

などを試してみましたが変更できませんでした。
何か変更する方法があれば教えていただきたいです。

#ソースコード

• html(styleを直接記述)

<select class="select-value"> 
      <option value=1>あ</option>
      <option value=2>い</option>
      <option value=3 style='color: red;'>う</option>
</select>

• JavaScript

$('.select-value').select2();

Answer 1

下記のCSSで文字色を変更可能です。

.select2-results__option[id$="<optionタグのvalueの値>"] {
  color: <色>;
}

// 例（「あ」の文字色を赤色にする）
.select2-results__option[id$="1"] {
  color: red;
}

select2の選択肢のclass名は「select2-results__option」になるようです。id名の最後にはoptionタグのvalueの値が設定されるようです。
[id$="XX"]で「id名がXXで終わる」要素を選択できるので、上記のCSSで各選択肢にＣＳＳを適用できます。

• 参考：How to use different colors for each select2 option?