Usando cores diferentes para opções suspensas usando Select2

Question

Estou usando uma lista suspensa Select2 e gostaria de definir cores diferentes nas opções. Mudei com sucesso todas as opções para uma cor, mas quero variar entre várias com base no valor. Tenho cerca de 1000 opções (páginas em livros) e preciso marcar algumas delas (com base em algum conjunto de páginas) como verdes. Você pode propor a maneira de conseguir isso?

HTML

<label for="add-coord-page">P:  </label>
<select class="select2" id="add-coord-page" name="pages" style="width:60px"></select>

CSS

#select2-add-coord-page-results { 
    color: red;
}

Exemplo: resultado esperado

Answer 1

Use o nth-childna optiontag

<style>
    option:nth-child(odd) {
        color: red;
    }
    option:nth-child(even) {
        color: green;
    }
</style>
<select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
    <option>Option 6</option>
</select>

Answer 2

Resolvido! O principal problema é que as opções suspensas selection2 são criadas dinamicamente e nenhum evento é gerado nela. Esse é o truque.

1. Marquei todas as páginas que deveriam mudar de cor adicionando espaço.

2. Em seguida, no evento relevante:

    // Set colors of pages containing images
    $('#add-coord-page').on('select2:open', function (e) { setTimeout(function () { $('.select2-results__option:contains(" ")').css('color', SUCCESS_COLOR);
        }, 100);
   
    });
   

O cronômetro coloca a função de mudança de cor no loop de eventos. Obrigado a todos que tentaram me ajudar.