Different CSS style for JSF messages - jsf

Question

In JSF, I have included the following line in my xhtml file:
<h:panelGroup id="messageHeader">
<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.

Answer 1

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;
}

Answer 2

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.