title: Apply CSS to <f:selectItem> nested in <h:selectOneMenu>
body: <p>I want to apply CSS specific to <code>&lt;f:selectItem&gt;</code> in <code>&lt;h:selectOneMenu&gt;</code> to be displayed in a different style. </p>
  
  <p>e.g. I want every option of coffee in the list below to be displayed in a different color.</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;h:selectOneMenu value="#{user.favCoffee1}"&gt; 
     &lt;f:selectItem itemValue="Cream Latte"   itemLabel="Coffee3 - Cream Latte" /&gt; 
     &lt;f:selectItem itemValue="Extreme Mocha" itemLabel="Coffee3 - Extreme Mocha" /&gt; 
     &lt;f:selectItem itemValue="Buena Vista"   itemLabel="Coffee3 - Buena Vista" /&gt; 
  &lt;/h:selectOneMenu&gt;`
  </code></pre>
  
  <p>Can anyone help me out here?</p>