Jquery Accordion alternate colors

Question

Hi i have jquery accordion, iam trying to give alternate colors upto 9th position its wokring fine but from 10th postion color is not getting effected,

     .ui-accordion .ui-accordion-header:first-of-type {
         background-color : #CACACA;
    }
   .ui-accordion .ui-accordion-header:nth-of-type(2) {
         background-color :  #B1DFE5
    } 
    .
    .
    .
   .ui-accordion .ui-accordion-header:nth-of-type(10) {
         background-color :  #B1DFE5
    }

     // This color is not getting applied

I have tried with other CSS code like

      .ui-accordion .ui-accordion-header:last-of-type{
         background-color :  #CACACA;
    }
    // This is also not working

Could any one please help me how to fill color from 10th postion to 15th position with alternate colors.

Here is my code in asp

         <div id="accordion">
           <h3>Project 1</h3>
              <div>
              <p><strong>TEAM:</strong>A, B , C </p> 
              </div>
              <h3>Project2 </h3>
              <div>
              <p><strong>TEAM:</strong>A, B , C </p> 
              </div>
              .
              .
              .

               <h3>Project 10 </h3>
              <div>
              <p><strong>TEAM:</strong>A, B , C </p> 
              </div>
              <h3>Project 11</h3>
              <div>
              <p><strong>TEAM:</strong>A, B , C </p> 
              </div>

        </div>

I want to show all these projects in accordion with alternate colors

Thanks in Advance

Answer 1

Its working fine for me jsfiddle.net/raunakkathuria/sc7uL/2

But if you are facing problem with this approach, you can add class to your html then in simple way like this

<h3 class="class1">Project 1</h3> // add different class to every header

Then in css do this

.ui-accordion .ui-accordion-header.class1 { 
  background-color : #CACACA;
}

Check http://jsfiddle.net/raunakkathuria/sc7uL/3/