how to change the color in each selectitem of a jsf selectOneRadio

Question

I have a selectOneRadio that has 3 options : Finishing, embargo and Shipping

<h:selectOneRadio value="#{solicitacaoImpressaoBean.entrega.tipoGuia}" class="tipoGuia" >
                        <f:selectItem itemValue="Acabamento" itemLabel="Acabamento" />
                        <f:selectItem itemValue="Embargo" itemLabel="Embargo" />
                        <f:selectItem itemValue="Expedicao" itemLabel="Expedição"/>
    </h:selectOneRadio>

I want to put on the first the color black, the second the color blue and the third the color green.

I tried with css the following way:

.tipoGuia tr:nth-child(1) td label   {
    color : black
 }
.tipoGuia tr:nth-child(2) td label   {
   color : blue
} 
.tipoGuia tr:nth-child(3) td label   {
   color : green;

} 

but it didn’t work. does anyone have any idea how to do it? Thank you.

I got it this way:

.tipoGuia tr td:nth-of-type(1){
    color : black;
}
.tipoGuia tr td:nth-of-type(2){
    color : blue;
}
.tipoGuia tr td:nth-of-type(3){
    color : green;
} 

Answer 1

When I needed to do something like this I did it this way:

I took your code as an example, to test it here, I used styleClass, but you can use only class as well

<h:selectOneRadio styleClass="tipoGuia">
             <f:selectItem itemValue="Acabamento" itemLabel="Acabamento"/>
             <f:selectItem itemValue="Embargo" itemLabel="Embargo" />
             <f:selectItem itemValue="Expedicao" itemLabel="Expedição"  >
             </f:selectItem>
</h:selectOneRadio>

What you need to do is take the value set in itemValue and take it to css, as follows:

.tipoGuia 
    input[value="Acabamento"] + label {color:black} 
.tipoGuia
    input[value="Embargo"] + label {color:blue}
.tipoGuia
    input[value="Expedicao"] + label {color:green}

If you notice, when we inspect the select items in the browser, it always shows us a

<label for="enderecoDoSeuObjeto">Acabamento</label>

with the data of each inspected item.

Answer 2

I got it this way:

.tipoGuia tr td:nth-of-type(1){
    color : black;
}
.tipoGuia tr td:nth-of-type(2){
    color : blue;
}
.tipoGuia tr td:nth-of-type(3){
    color : green;
}