Create one primefaces accordion with tabs of different colors

Question

How can I set my accordion's tabs to have various colors? For now I have in my CSS file:

.ui-accordion .ui-accordion-header a {
    color: rgb(250,250,250);
    background: blue;
}

EDIT: I corrected my post because I forgot to say that I use Primefaces My xhtml file has the following:

<p:accordionPanel multiple="true" >
  <p:tab title="Blue Tab">
    <h:panelGrid columns="1" cellpadding="10">
      <h:outputText
        value="This tab must be blue" />
    </h:panelGrid>
  </p:tab>
  <p:tab title="Red Tab">
    <h:panelGrid columns="1" cellpadding="10">
      <h:outputText
        value="This tab must be red" />
    </h:panelGrid>
  </p:tab>
</p:accordionPanel>

At this point both my tabs are blue. How can I make the second one red?

Answer 1

I found a solution. I added a titleStyleClass for each different colored tab:

<p:accordionPanel multiple="true">
  <p:tab title="Blue Tab" titleStyleClass="blueTab">
    <h:panelGrid columns="1" cellpadding="10">
      <h:outputText
        value="This tab must be blue" />
    </h:panelGrid>
  </p:tab>
  <p:tab title="Red Tab" titleStyleClass="redTab">
    <h:panelGrid columns="1" cellpadding="10">
      <h:outputText
        value="This tab must be red" />
    </h:panelGrid>
  </p:tab>
</p:accordionPanel>

and in my CSS file I set the background color for each titleStyleClass :

.blueTab {
  background: blue;
}

.redTab {
  background: red;
}

It works fine. I hope this helps someone!!