CSS Button Element Class "Inheritance"

Question

I'm new to this, but none of the other q/a's on the topic seem to help me, so I will ask.

Here is some code:

<style>
button.accordion {
background-color: #eee
//a list of other details
}

other stuff that manipulates button.accordion
</style>

Now, I want to do something like this:

<button class="accordion">Personnel</button>
<div class="panel">
<p>contents of personnel here</p>
</div>

<button class="accordion">Necessary Expenditures</button>
<div class="panel">
<p>contents of expenditures here</p>
</div>

<button class="accordion">Personnel</button>
<div class="panel">
<p>contents of personnel here</p>
</div>

<button class="accordion">Necessary Expenditures</button>
<div class="panel">
 <p>contents of expenditures here</p>
</div>

And I want them all to be class="accordion" so that they function the same way, but I want to override background-color so that a couple of them have a different color.

I have tried adding a class like so:

<style>
.green {
background-color: #669900;
}
</style>

and then:

<button class="accordion green">Personnel</button>
<div class="panel">
<p>contents of personnel here</p>
</div>

<button class="accordion">Necessary Expenditures</button>
<div class="panel">
 <p>contents of expenditures here</p>
</div>

but that doesn't seem to work.

Anyway I can do this?

I am using javascript so that the buttons act as collapsible sections to my page.

Answer 1

Use selectors button.accordion, button.green. Comment at css is /**/, not //. #66900 is not a valid hex color. Include missing 9 at button.green background-color value.

button.accordion {
  background-color: #eee;
  /* css comment */
  /* a list of other details */

}
button.green {
  background-color: #669900; 
}

<button class="accordion green">Personnel</button>
<div class="panel">
  <p>contents of personnel here</p>
</div>

<button class="accordion">Necessary Expenditures</button>
<div class="panel">
  <p>contents of expenditures here</p>
</div>

<button class="accordion">Personnel</button>
<div class="panel">
  <p>contents of personnel here</p>
</div>

<button class="accordion">Necessary Expenditures</button>
<div class="panel">
  <p>contents of expenditures here</p>
</div>