Search code examples
csscss-selectorspseudo-classnegation

Why doesn't this CSS :not() declaration filter down?

I want to select spans that are not the descendants of a specific class, let's call it "no". Here's my CSS: 

div:not(.no) span{background-color:#00f;}

Here's the HTML

<div>
    <span>yes 1</span>
</div>
<div class="no">
        <span>no 1</span>
</div>
<div class="no">
    <div>
           <span>no 2</span>
    </div>
</div>

Two questions:

  1. Why does my CSS apply to both yes 1 and no 2?

  2. Why does the whole thing break if I switch to a universal selector?

    *:not(.no) span{background-color:#00f;}

Here's the code in JSFiddle: http://jsfiddle.net/stephaniehobson/JtNZm/

Solution

    1. Both of the span elements' parent div elements don't have the class no, regardless of whether any other ancestors do have it or not:

      <div> <!-- This is div:not(.no), pretty much a given -->
    <span>yes 1</span>
</div>

      <div class="no"> <!-- In this case, although this is div.no... -->
    <div>        <!-- ... this is div:not(.no)! -->
           <span>no 2</span>
    </div>
</div>

    2. Both html and body, which are ancestors of your div and span elements, satisfy *:not(.no) when using a universal selector (or rather, when omitting a type selector). This causes all of your span elements to have the background color.

    One solution to this is to anchor your negation filter to the body element using the child combinator, if your top-level div elements will always be children of body:

    body > div:not(.no) span { background-color: #00f; }

    jsFiddle demo

    Another solution is to simply use override styles.