1

I have a class for a button:

.client-header button {
    /*Properties*/
}

and a class to detect when the menu is open:

.client-menu-open {
    /*Properties*/
}

I would like to change the button background based on whether or not the menu is open. I want something like this:

.client-header button .client-menu-open {
    /*Properties*/
}

But the classes are in two different files, so it doesn't work. Is there any way to do this across different files?

Here is the 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;
}

.client-header button:hover {
    background-color: #555555;
}

.client-header button:active {
    background-color: #4E4E4E;
}

.client-header-caption {
    float: left;
}

.client-header-title,
.client-header-subtitle {
    margin-left: 10px;
}

.client-header-title {
    line-height: 25px;
}

.client-header-subtitle {
    font-size: 0.5rem;
    line-height: 15px;
}

@media (min-width: 640px) {
    .client-header-title,
    .client-header-subtitle {
        display: inline-block;
        line-height: var(--header-height);
    }

    .client-header-title {
        font-size: 1.5rem;
    }

    .client-header-subtitle {
        font-size: 1rem;
    }

}

.client-header .client-menu-open button {
    background: #CCCCCC;
}

And here is the code for the menu index.css:

.client-menu {
    position: absolute;
    top: var(--header-height);
    bottom: 0;
    left: -var(--menu-width);
    width: var(--menu-width);

    border-right: 1px solid var(--border-color);

    padding-bottom: var(--menu-footer-height);
    overflow: hidden;

    transition: left 0.2s;
}

.client-menu-open {
    left: 0;
    box-shadow: 0 0 30px var(--shadow-color);
    background: #444444;
}

.client-menu-pinned {
    box-shadow: none;
}

.client-menu-header {
    height: var(--menu-header-height);
    text-align: right;
    background-color: #444444;
}

.client-menu-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--menu-footer-height);

    text-align: right;
}

And the HTML structure is:

<header class="client-header">
    <button class="client-header-menu-toggle"/>
</header>
<div class="client-menu"/>
Improve this question
5
  • What do you mean the classes are in 2 different files? What is the html structure? CSS is depended on the html structure. If the button is inside of the menu and the menu is inside the header then .client-header .client-menu-open button {} Commented Jul 9, 2014 at 15:20
  • I have two folders- header and menu- and each of them has an index.css file in it. The .client-header button class is in the header folder, and the .client-menu-open class is in the menu folder. Commented Jul 9, 2014 at 15:24
  • You still have not mentioned the html structure. What you are trying to target depends on your html structure and has nothing to do with where the class are located. The way you are trying to target the button is most likely incorrect Commented Jul 9, 2014 at 15:26
  • See my last edit for the html. Commented Jul 9, 2014 at 16:09
  • you will need to use javascript to target the button. I think this cannot be done with css Commented Jul 9, 2014 at 17:18

5 Answers 5

Reset to default
1

You can use @import like so (in your primary CSS stylesheet):

@import url('external.css');

/* external.css above will be loaded */

Refer to this documentation: http://www.cssnewbie.com/css-import-rule/

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

The @import rule allows you to include external style sheets in your document. It is a way of creating a style sheet within your document, and then importing additional rules into the document.

To use the @import rule, type:

<style type="text/css">
 @import url("import1.css");
 @import url "import2.css";
</style>

For more info refer here https://developer.mozilla.org/en-US/docs/Web/CSS/@import

Improve this answer

Comments

0

Link to the other file and style .client-menu-open

Improve this answer

Comments

0

if this is your html

<div class="client-menu-open"> <!-- this class is here only if the menu gets opened, else, this div has no class -->

stuff 

stuff
<div class="client-header-button">
<button></button>
</div>

</div>

the correct syntax is the following

button {
    background:red;
}

.client-menu-open button {
background:blue
}
Improve this answer

2 Comments

Ok, so I now have @import url('../menu/index.css'); at the top of the header index.css and .client-header .client-menu-open button { background: #CCCCCC; } at the bottom, but it still doesn't work... am I missing something?
try .client-menu-open .client-header button {} but PLEASE post your code, that will be easier
0

your CSS selector is incorrect, that's why it doesn't work. It has nothing to do with where CSS styles are defined.

.client-header button .client-menu-open will only select the following elements:

  • elements with class="client-menu-open"
  • which are children of button elements
  • which themselves are children of elements with class="client-header" .

what you want, I think, is

  • button elements
  • which are children of elements having "class=client-header" AND "class=client-menu-open".

the proper selector for those elements would be .client-header.client-menu-open button.

Improve this answer

1 Comment

Must this be in a certain one of the index.css? (header/index.css or menu/index.css)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.