How to have have multiple mat-selects each with a different font color for the selected value?

Question

I'd like to have multiple mat-selects on a page, each with a different color for the mat-select-value.

When I put this in my css it changes the color of all the selected values:

:host ::ng-deep .mat-select-value {
    color: green !important;
}

I want another mat-select that has a mat-select-value of blue though. How would I do that?

Answer 1

Try <mat-select class="blue"> then

:host ::ng-deep .blue .mat-select-value {
    color: blue !important;
}

And so on..