Change styles for multiple select 2 components in same page

Question

I have two select 2 multiple select dropdowns.

HTML

<select class="js-example-basic-multiple1 js-states form-control" id="id_label_multiple" multiple="multiple"></select>

<select class="js-example-basic-multiple2 js-states form-control" id="id_label_multiple" multiple="multiple"></select>

js

        $('.js-example-basic-multiple1').select2({
            data: data1,
            multiple: true
        });

        $('.js-example-basic-multiple2').select2({
            data: data2,
            multiple: true
        });

I want to change css like this for first element but not for second one,

.select2-results__option{
  color: red;
}

But this appears to change both components. I trie adding inside separate divs but didn't work. Is there any solution?

Answer 1

Did you try this?

.js-example-basic-multiple1 .select2-results__option { color: red; }