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

Question

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/

Century

Related: CSS negation pseudo-class :not() for parent/ancestor elements – Leicestershire

Answer 1

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.

Leicestershire

It's a small part of a much larger jQuery optimization problem and I can't be certain of the relation of any of the elements to each other in the DOM. This was kind of a tangent that was bothering me, but it's not any more :) – Century

+1. Thanks. I finally understand what my problem was, that prompted me to ask the related question #20869561 . – Trimmer

Answer 2

BoltClock is correct. It might make more sense if you phrase the selector like this:

Select any span element
that is descended from a div element
whose class value does not contain the word no.

Each of the selected spans in your example is in fact descended from a div whose class value does not contain the word no—the fact that the second of them is also descended from a div whose class value does contain the word no doesn’t negate (ha!) the previous statement.

What’s interesting is I would wager that if you moved the second no down a level, the second span would still be matched. CSS doesn’t have a notion of element proximity, so any ancestor div should suffice to match the selector, regardless of whether it’s “closer” to the span or not.

Ladle

I tried it an you're right, if I move the second no down a level the second span is still matched. More frustrating than interesting :P – Century

Holy crap, it's Eric Meyer! :D – Leicestershire

Answer 3

I think the best choice is to split your statement into 2:

div span { background-color:#00f; }
.no span { background-color:#fff; }

You can see the effect here: http://jsfiddle.net/JHTqp/

Folse

Unfortunately it's a small part of a much larger jQuery optimization problem, this was just my test case. – Century