Change header styleClass of a panel

Question

I have panels and would like to change the header's background color of only one of them. Thus I can't juste change the ui-panel-titlebar style.

I tried the following without success.

<p:panel ....>
    <f:facet name="header" styleClass="ui-panel-my-titlebar">
        ....
    </f:facet>
</p:panel>

If I put the styleClass in the p:panel tag, then is the background of the content change too.

My styleClass:

.ui-panel-my-titlebar {
    background: #BBBBBB;
}

Answer 1

I got it to work with the following:

<p:panel styleClass="customTitleBar">
  <f:facet name="header">
    ....
  </f:facet>
</p:panel>

css:

.customTitleBar > .ui-panel-titlebar {
    background: #BBBBBB;
}