CODEWITHSUNDEEP
htmlcsscss-selectors
Luke101
Luke101

Reputation: 65308

Why is the :not selector not working

I am trying to figure out why the not selector is not working. Here is my code:

http://jsfiddle.net/8CKJa/15/

CSS:

#full-content, #mobile-content {
    display: none;
}

.collapsed .make #mobile-content {
     display: block;
}
.content:not(.collapsed) .make #full-content {
     display: block;
}

HTML:

<div class="content">
     <div class="content collapsed">
         <div id="car">
              <div class="make">
                  <div id="full-content">
                       full content
                  </div>
                  <div id="mobile-content">
                       mobile content
                  </div>
             </div>
         </div>
     </div>
</div>

I am trying to hide the full-content div. As you can see .content:not(.collapsed) is not suppose to match any of the divs but it is matching the full-content div. How can I hide the full-content div. I am not sure how many .content parents there will be. The collapsed class can disappear if the menu is expanded.

Upvotes: 1

Views: 199

Answers (2)

arleslie
arleslie

Reputation: 471

The :not() selector is working as expected. The issue is that your wrapper div has the class of content without collapsed and then you have one with the class collapsed. Removing the first div makes it work as expected.

http://jsfiddle.net/3L7ym/

<div class="content collapsed">
     <div id="car">
          <div class="make">
              <div id="full-content">
                   full content
              </div>
              <div id="mobile-content">
                   mobile content
              </div>
         </div>
     </div>
 </div>

Upvotes: 4

Will
Will

Reputation: 4155

Presuming you are looking to key off of .collapsed and you can't know ahead of time how many .content containers you'll have, you may be able to simplify the whole thing by removing the :not selector:

.collapsed #mobile-content {
     display: block;
}
.collapsed #full-content, #mobile-content {
     display: none;
}

Fiddle here.

Upvotes: 0

Related Questions