Css if element has not specific class

Question

I have the following lines of code in my HTML and I'm trying to add css styling to .menustructure and .tl-nav-holder only if the button inside of them does NOT have the class .collapsed.

<div class="menustructure">
   <div class="tl-nav-holder">
      <button class="navbar-toggle collapsed"> click </button>
   </div>
</div>

I tried a few things myself based on things I've been reading on Stackoverflow but without any succes. This is my current css:

.navbar-toggle:not(.collapsed) .menustructure{
  position: absolute;
  width: 100% !important;
  padding: 0;
  height: 1000px;
}


.navbar-toggle:not(.collapsed) .tl-nav-holder{
  width: 100% !important;
  height: 100% !important;
}

I know there are ways to do it with Jquery but I don't want to be dependend on that. Does anyone know what I'm doing wrong?

Unfortunately this won't be possible with css, since you can't "recurse backwards" only "cascade down", so you will have to rely on javascript or jQuery to target elements in this way - or find a method to apply classes to the containing elements you need styled when `button` has `.collapsed`. — UncaughtTypeError, Oct 29 '17 at 17:40

score 0 · Answer 1 · edited Oct 30 '17 at 05:21

You are using :not incorrectly. It selects elements that do not have a specified class. If your 2 divs have class myClass but the button does not, the button can be selected.

:not(myClass) {
  color: red;
}

<div class="menustructure myClass">
    <div class="tl-nav-holder myClass">
        <button class="navbar-toggle collapsed">click</button>
    </div>
</div>

https://jsfiddle.net/wazz/x8pLqxbh/

Css if element has not specific class

1 Answers1