Apply zebra striping to jQueryUI accordion

Question

I have a asp.net mvc app building a accordion based on the jQueryUI Accordion plugin - I'd like to apply zebra striping.

Here's the constructor loop:

<div id="accordion">    
    <% 
        foreach (var webinar in Model as IList<Webinar>)
       {  %>
        <div id="accordionItem">//toDo: Programmically pick odd/even rows 
        <div class="accStripe"> //insert a div for even rows
            <h3><a href="#"><b><%= myObj.Title%></h3>
            <div id="descContent">
                 <a href="Details/<% =myObj.ID %>"><%= myObj.Desc%> ...more</a>
            </div>
         </div>       
        </div>
    <% } %>
 </div>

Then the accStripe rule:

.accStripe{ background:#F7EEDC none repeat scroll 0 0; border-bottom:1px dotted #DFAC45; }

I'm able to pickup the dotted border but not the background color. I assume that would be due to greater specificity on the part of the .ui-accordion-header? How deep would I have to dig to figure out how to override that?

thx

Answer 1

Richard D. Worth on jquery-ui provides the answer:

Your wrapper element (.accStripe) contains two children, .ui-accordion-header and .ui-accordion, each of which have backgrounds:

.accStripe { background:#F7EEDC none repeat scroll 0 0; border-bottom:1px dotted #DFAC45; }
.accStripe .ui-accordion-header { background:#F7EEDC none repeat scroll 0 0; }
.accStripe .ui-accordion-content { background:#F7EEDC none repeat scroll 0 0; }