Different CSS style for JSF messages

In JSF, I have included the following line in my xhtml file:

<h:panelGroup id="m开发者_StackOverflow中文版essageHeader">
   <h:messages for="messageHeader" layout="list" errorClass="error"  infoClass="inform"/>
</h:panelGroup>

The text gets rendered as

<ul>
  <li class="error"> Please enter a First Name </li>
  <li class="error"> Please enter a Last Name </li>
</ul>

How do I get the CSS style to apply to the <ul> tag or some surrounding <span> tag?

Here is what I am trying to do. I want all error messages to appear in a single red box. I also want all info messages to appear in a single green box. The example above produces 2 red boxes; one for each <li> item.

Use the styleClass attribute of <h:messages>. It will be applied on the parent HTML element.

E.g.

<h:messages styleClass="messages" />

will end up as

<ul class="messages">
    ...
</ul>

Update: you seem to want to show info and error messages in separate lists. Use two <h:messages/> instead on which you hide the other severity.

<h:messages styleClass="errorMessages" infoStyle="hide" />
<h:messages styleClass="infoMessages" errorStyle="hide" />

with

.hide {
    display: none;
}

This could be done by providing h:messages tag for each message type you need to show with appropriate condition. For exapmle for error message type:

<h:panelGroup id="errorMessageHeader" class="whatever you need" rendered="#{FacesContext.isValidationFailed()}">
   <h:messages for="errorMessageHeader" layout="list" errorClass="error" />
</h:panelGroup>

Conditions for other message types you can find by combining methods from

javax.faces.context.FacesContext

Thanks, A.K.