Different CSS style for JSF messages -

in jsf, have included following line in 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 first name </li>   <li class="error"> please enter last name </li> </ul> 

how css style apply <ul> tag or surrounding <span> tag?

here trying do. want error messages appear in single red box. want info messages appear in single green box. example above produces 2 red boxes; 1 each <li> item.

use styleclass attribute of <h:messages>. applied on parent html element.

e.g.

<h:messages styleclass="messages" /> 

will end as

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

---

update: seem want show info , error messages in separate lists. use 2 <h:messages/> instead on hide other severity.

<h:messages styleclass="errormessages" infostyle="hide" /> <h:messages styleclass="infomessages" errorstyle="hide" /> 

with

.hide {     display: none; }