How to change the background color of the particular accordion in nested accordion?

Question

I am trying to change the background color of the accordion (firstchild) in the nested accordion(prime ng)?

<p-accordion>
   <p-accordionTab header="Header 1">
      <p-accordion>
         <p-accordionTab header="Header 1">
            Content 1
         </p-accordionTab>
         <p-accordionTab header="Header 2">
            Content 2
         </p-accordionTab>
         <p-accordionTab header="Header 3">
            Content 3    
         </p-accordionTab>
      </p-accordion>
   </p-accordionTab>
</p-accordion>

Answer 1

One solution that I can think of is below:

1) Add an id tag to your child accordion:

<p-accordion>
  <p-accordionTab header="Header 1">
   <p-accordion>
     <p-accordionTab id="firstaccordion" header="Header 1">
        Content 1
     </p-accordionTab>
     <p-accordionTab header="Header 2">
        Content 2
     </p-accordionTab>
     <p-accordionTab header="Header 3">
        Content 3    
     </p-accordionTab>
   </p-accordion>
  </p-accordionTab>
</p-accordion>

2) Then go to your styles.css and add:

#firstaccordion .ui-accordion-content{
    background-color: blueviolet !important; //your choice colour
}