Luke101 Luke101 - 3 months ago 12
CSS Question

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.

Answer

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>
Comments