styling a select dropdown based on any input

Question

I am using WordPress and I have a select / combo box

<select class="wcmca_address_select_menu select2-hidden-accessible" data-type="shipping" id="wcmca_address_select_menu_shipping" name="wcmca_shipping_selected_address_id" tabindex="-1" aria-hidden="true">
   <option value="last_used_shipping">Shipping address used for the previous order</option>
   <option value="1">Parkhouse Industrial Estat</option>
</select>

I have the following CSS which works when page is loaded - the select box border etc is red,

.woocommerce-page .select2-container--default .select2-selection--single {
    outline: 0;
  box-shadow: 0 0 3px 0 var(--nv-secondary-accent);
    --formFieldBorderColor: var(--nv-secondary-accent);
}

when the user has selected any option I want the following css to be applied:

.woocommerce-page .select2-container--default .select2-selection--single:valid  {
    outline: 0;
    box-shadow: 0 0 3px 0 #0bf568;
    --formFieldBorderColor:#13d122;
}

What is the simplest method to apply the following css styling when the user has selected any option?