datalist li style

Question

I cannot set the 'li' style anyone knows why?

I have this original code

<ul class="unCollapsableSideBarList">
    <li class="sideBarListLink"><a href="#">aaaaa</a></li>
    <li class="sideBarListLink"><a href="#">bbbbb</a></li>
</ul>

I made it dynamic and replaced it with:

<apex:dataList value="{!products}" var="product" styleClass="SideBarList">
     <apex:outputLink value="myPage?id={!product.Id}" styleClass="sideBarListSelected">{!product.Name}</apex:outputLink>
 </apex:dataList>

The 'ul' style is set as expected but the 'li' is not This is what I see (the li has no class) in the page source (I removed the ids because they are very long):

<ul class="unCollapsableSideBarList">
    <li class="">
    <a href="PortfolioCatalogDetails?id=a00d0000008PJEkAAO" class="sideBarListLink sideBarListSelected_product">aaa</a>
    </li>
</ul>

Answer 1

apex:dataList doesn't appear to have any attributes that let you control the li tags it renders.

Alternative 1

Use the apex:repeat tag to create the list instead. For example:

<ul class="sideBarList">
    <apex:repeat value="{!products}" var="product">
        <li class="sideBarListLink"><a href="#">aaaaa</a></li>
    </apex:repeat>
</ul>

Alternative 2

If you insist on using apex:datalist, you can still style the li tags with CSS as such:

.sidebarList li {
    // css for li
}

Answer 2

It's not possible to set the style of the li tag rendered by the <apex:dataList /> component using native tag attributes, as you've seen.

In the style markup you can target the element using a parent/child declaration rather than targeting the li element itself.

Like so: ul.unCollapsableSideBarList li { font-weight: bold; }

Alternatively, you can use a repeat tag instead of the dataList to create the unordered list markup, which will allow you to render absolutely anything you'd like.

<ul class="unCollapsableSideBarList">
    <apex:repeat value="{!products}" var="product">
        <li class="sideBarListLink">
            <apex:outputLink value="myPage?id={!product.Id}">{!product.Name}</apex:outputLink>
        </li>
    </apex:repeat>
</ul>