multiple class selector with ::-moz-progress-bar css

Question

I need to color progress bar with different colors based on their value. I have this test snippet

<div>
    pbar tests            
    <br>
    <progress class="pbar-0" max="100" value="0"></progress>
    <br>
    <progress class="pbar-10" max="100" value="10"></progress>            
    <br>
    <progress class="pbar-30" max="100" value="30"></progress>
    <br>
    <progress class="pbar-60" max="100" value="60"></progress>
    <br>
    <progress class="pbar-90" max="100" value="90"></progress>
    <br>
    <progress class="pbar-100" max="100" value="100"></progress>
</div>

and the following css

*/*begin progress bar*/
progress,          /* All HTML5 progress enabled browsers */
progress[role]     /* polyfill */
{

    /* Turns off styling - not usually needed, but good to know. */
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;

    /* gets rid of default border in Firefox and Opera. */ 
    border: none;

    /* Needs to be in here for Safari polyfill so background images work as expected. */
    background-size: auto;

    /* Dimensions */
    width: 150px;
    height: 15px;
    border-radius: 3px;

}
/* Polyfill */
progress[role]:after {
    background-image: none; /* removes default background from polyfill */
}
/* Ensure fallback text doesn't appear in polyfill */
progress[role] strong {
    display: none;
}
progress,                          /* Firefox  */ 
progress[role][aria-valuenow] {    /* Polyfill */
    background: #f2f1f1 !important; /* !important is needed by the polyfill */
}
/* Chrome */
progress::-webkit-progress-bar {
    background: #f2f1f1;
}
/* IE10 */
progress {
    color: black;
}
/* Firefox */
progress::-moz-progress-bar { 
    background: black;  
}
/* Chrome */
progress::-webkit-progress-value {
    background: black;
}
/* Polyfill */
progress[aria-valuenow]:before  {
    background: black;
}
.pbar-0,.pbar-10,.pbar-30::-moz-progress-bar {
    background: red;
}

.pbar-60::-moz-progress-bar {
    background: yellow;
}


/*end progress bar*/*

I'm not able to match mulple classes with ::-moz-progress-bar selector:

.pbar-0,.pbar-10,.pbar-30::-moz-progress-bar {
    background: red;
}

Only pbar-30 is colored with red. What I'm doing wrong here?

Is is possible to write a multiple selector like this or I need to write them one by one?

Answer 1

You will need to repeat the pseudo-element across each of your class selectors.

Note that in this case, you can still group all three selectors into a single rule, since it's the exact same vendor-specific pseudo-element:

.pbar-0::-moz-progress-bar, .pbar-10::-moz-progress-bar, .pbar-30::-moz-progress-bar {
    background: red;
}

You only need to split a selector group into separate rules when each of the selectors has a different vendor prefix, like you have done with several of your other rules (e.g. progress::-moz-progress-bar and progress::-webkit-progress-value).