How to override p:datalist css-class?

Question

I am trying to override Primefaces css in one xhtml-file. Yes it is overriding it, but... I have got two nested datalists (inner and outer) and I would like to have bigger font in outer one, but not inner one, that is the problem, I don't know how to do it. It is still using li class="ui-datalist-item" even if the outer level is using .ui-datalist-itemWithBiggerFont.

.ui-datalist-item{
    background: none;
    font-family: cursive;
    border: none;
    background-image: none;
}

.ui-datalist-itemWithBiggerFont{
    background: none;
    font-family: cursive;
    border: none;
    background-image: none;
    font-size: larger;  
}

#outer li{
   font-size: larger;    
}

In xhtml:

<h:outputStylesheet library="css" name="menu.css"  /> 
            <p:dataList id="outer" value="#{controller.selected.menuMenuId.courseCollection}"  var="course" itemType="course" type="ordered" styleClass=".ui-datalist-itemWithBiggerFont">  
                #{course.heading}, #{course.courseId}

                <p:dataList id="inner" value="#{course.dishCollection}" var="dish" itemType="dish" styleClass=".ui-datalist-item">
                    #{dish.name}
                </p:dataList>    
            </p:dataList>  

And the source code in html:

<div id="outer" class="ui-datalist ui-widget .ui-datalist-itemWithBiggerFont"><div id="j_idt90_content" class="ui-datalist-content ui-widget-content"><ol id="j_idt90_list" class="ui-datalist-data" type="course"><li class="ui-datalist-item">  
                outer, 1

                <div id="outer:0:inner" class="ui-datalist ui-widget .ui-datalist-item"><div id="j_idt90:0:j_idt92_content" class="ui-datalist-content ui-widget-content"><ul id="j_idt90:0:j_idt92_list" class="ui-datalist-data" type="dish"><li class="ui-datalist-item">
                   inner1
                </li><li class="ui-datalist-item">
                    inner2

Thanks! Sami

Answer 1

Wrap what you want to be overriden within new tag like for example <h:panelGroup> and navigate to that tag in your css, u should also use firebug or google plugin witch for sure will help you to localize what you need to change. hope it helps!