I have defined a class for styling a button:
.client-header button {
/*Properties*/
}
And I also have a class to indicate when the menu is open:
.client-menu-open {
/*Properties*/
}
My goal is to change the background of the button depending on whether the menu is open or not. I attempted to use the following CSS:
.client-header button .client-menu-open {
/*Properties*/
}
However, since these classes are in separate files, this approach does not work. Is there a way to achieve this across different files?
Here is the CSS code for the header (index.css):
@import url('../menu/index.css');
.client-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--header-height);
overflow: hidden;
border-bottom: 1px solid #7E7E7E;
background: #cccccc;
}
.client-header button {
float: left;
height: 100%;
border: none;
border-right: 1px solid var(--border-color);
border-radius: 0;
box-shadow: none;
line-height: 39px;
background-color: #444444;
color: #FFF;
}
...(remaining content)...
.client-header .client-menu-open button {
background: #CCCCCC;
}
And here is the CSS code for the menu (index.css):
.client-menu {
...(styles)...
}
.client-menu-open {
...(styles)...
}
...(remaining content)...
<p>The HTML structure contains:</p>
<pre><code><header class="client-header">
<button class="client-header-menu-toggle"/>
</header>
<div class="client-menu"/>