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

by

  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.

More Related Contents:

  1. css3 nth of type restricted to class [duplicate]
  2. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  3. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  4. What is the difference between a pseudo-class and a pseudo-element in CSS?
  5. Does CSS have a :blur selector (pseudo-class)?
  6. What is the difference between :focus and :active?
  7. How to select the first, second, or third element with a given class name?
  8. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  9. What’s the difference between html[lang=”en”] and html:lang(en) in CSS?
  10. What’s the difference between CSS3’s :root pseudo class and html?
  11. CSS 3 nth of type restricted to class [duplicate]
  12. How to show the first N elements of a block and hide the others in css?
  13. Is there an opposite CSS pseudo-class to :hover?
  14. Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
  15. CSS Pseudo-classes with inline styles
  16. How do I select the “last child” with a specific class name in CSS? [duplicate]
  17. How to combine class and ID in CSS selector?
  18. :first-child not working as expected
  19. What is the difference between :first-child and :first-of-type?
  20. Specify multiple attribute selectors in CSS
  21. Should I use single or double colon notation for pseudo-elements?
  22. How to make Internet Explorer 8 to support nth child() CSS element?
  23. Browser support for CSS :first-child and :last-child
  24. How do I get the nth child of an element using CSS2 selectors?
  25. CSS combinator precedence?
  26. What is caret symbol ^ used for in css when selecting elements?
  27. What is the difference between p:nth-child(2) and p:nth-of-type(2)?
  28. CSS specificity or inheritance?
  29. CSS class repetition to increase specificity
  30. select second child

Leave a Comment