Bootstrap 5 alter button text color of open accordion with css-CodePudding

I want to change the appearance (color) of the text inside the div inside the button when the accordion is open but not being hovered on. I have been able to alter the color of the text on hover when the accordion is open, but once I am no longer hovering on the text and the accordion is open, the text color goes grey again rather than staying red. I am asking for help to maintain the color of the text within the button when the accordion panel is open, but not being hovered on. I.E. When hovered on and accordion is open, color is a dark red, when accordion is open, but not hovered on, I want it to remain dark red. When the accordion is collapsed, I want the text to be grey. the hover title (div.btn_inner-silver)text color when the accordion panel is open the color of the text as it appears when hovered on.

How it appears when closed

How text appears when on hover

How it appears when uncollapsed/open

How I want it to appear when open/uncollapsed

HTML MARK UP

<div  id="acrd_sidebar1-14">
<!--   DATE/TIME   -->
<div >
<h2  id="hdr_timestamp1-14">
   <button type="button" aria-expanded="true" data-mdb-toggle="collapse" data-mdb-target="#collapsetimestamp1-14" aria-controls="collapsetimestamp1-14" >
      <div  >
         Date   Time
      </div>
   </button>
</h2>

CSS

.btn_inner-silver {
    width: 100%;
    margin: 0;
    padding: 8px;
    border: 1px solid silver!important;
    background: white;
    text-align: center!important;
    font-weight: 400;
    color: silver;
}

.btn_inner-silver:hover {
    color: #981e21;
}

.btn_inner-silver collapsed {
    color: #981e21;
}

h2.accordion-header button.accordion-button.btn_sidebar-brand div.btn_inner-silver collapsed:focus {
    color: pink!important;
}

SUMMARY of QUESTION

How do I keep the color of the text red when the selected accordion panel is open/uncollapsed?

I have tried a number of things, but am unable to target the open state. I've googled galore, sifted through the stack, experimented and failed repeatedly. Hoping for help. I am a newb.

CodePudding user response：

First, it looks like your missing the . in front of collapsed in the rule below.

.btn_inner-silver collapsed {
    color: #981e21;
}

Secondly, in the Accordion example here, they are using the CSS pseudo-class :not() to target the element that does not have the .collapsed class.

So it would look something like this I think for you:

.accordion-button:not(.collapsed) .btn_inner-silver{
    color: #981e21;
}