Is the CSS :not() selector supposed to work with distant descendants?

by

Is this supposed to work like I think it should?

No, the behavior you’re seeing is correct.

In your last example, although the <blockquote> contains a <p>, it’s the <blockquote> itself that’s matching *:not(p), as well as the condition that it must be a descendant of the <div>, which it is. The style is applied only to the <blockquote>, but it is then inherited by the <p> inside it.

The <p> element itself still counts against the negation, so the <p> itself is still being excluded from your selector. It’s just inheriting the text color from its parent, the <blockquote> element.

Even if none of its relatively close ancestors matched the selector, you have elements like html and body to worry about as well — although you could probably just tack on a body selector in the very beginning:

body div...

This is why I often strongly advise against using the :not() selector for filtering descendants, especially when not qualified with a type selector (like div in your example). It doesn’t work the way most people expect it to, and the use of inherited properties like color only serves to compound the problem, on top of making it even more confusing for authors. See my answers to these other questions for more examples:

The solution to the problem described is to simply apply a different color to <p> elements. You won’t be able to simply exclude them with a selector because of inheritance:

/* Apply to div and let all its descendants inherit */
div {
  color: red;
}

/* Remove it from div p */
div p {
  color: black;
}

On Selectors Level 4: yes, :not() has indeed been enhanced to accept full complex selectors that contain combinators. Essentially, this means (once browsers begin implementing it) you will be able to write the following selector and have it do exactly what you want:

p:not(div p) {
  color: red;
}

In case anyone is interested, this works in jQuery today.

More Related Contents:

  1. how do I make device specific selectors in css [closed]
  2. Is there a “previous sibling” selector?
  3. What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?
  4. CSS selector for first element with class
  5. What does the “+” (plus sign) CSS selector mean?
  6. How are the points in CSS specificity calculated
  7. Is there a CSS selector by class prefix?
  8. How do I select an element based on the state of another element in the page with CSS?
  9. Does the order of classes listed on an item affect the CSS?
  10. Select all child elements recursively in CSS
  11. CSS “and” and “or”
  12. Using the last-child selector
  13. CSS selector for attribute names based on a wildcard
  14. How can I select an nth child without knowing the parent element?
  15. IE8 :nth-child and :before
  16. How to select label for=”XYZ” in CSS?
  17. In which direction do selector engines read, exactly?
  18. CSS Selector for
  19. What’s the difference between html[lang=”en”] and html:lang(en) in CSS?
  20. Can I colour backgrounds of selected items in HTML select options with CSS only?
  21. CSS3 combining selectors with OR instead of AND
  22. Why doesn’t this CSS :not() declaration filter down?
  23. Should I use single colons (:) or double colons (::) for before, after, first-letter and first-line pseudo-elements?
  24. How to show the first N elements of a block and hide the others in css?
  25. What is the difference between :before and ::before?
  26. How to skip first child?
  27. How to select all elements whose ID starts and ends with specific strings?
  28. selector for nth nested elements
  29. How does CSS specificity decide which styles to apply?
  30. Latest on CSS parent selector [duplicate]

Leave a Comment