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

by

Doesn’t this read, “Select all h1 elements that have an ancestor that is not a div element…?”

It does. But in a typical HTML document, every h1 has at least two ancestors that are not div elements — and those ancestors are none other than body and html.

This is the problem with trying to filter ancestors using :not(): it just doesn’t work reliably, especially when the :not() is not being qualified by some other selector such as a type selector or a class selector, e.g. .foo:not(div). You’ll have a much easier time simply applying styles to all h1 elements and overriding them with div h1.

In Selectors 4, :not() has been enhanced to accept full complex selectors containing combinators, including the descendant combinator. Whether this will be implemented in the fast profile (and thus CSS) remains to be tested and confirmed, but once it is implemented, then you will be able to use it to exclude elements with certain ancestors. Due to how selectors work, the negation has to be done on the element itself and not the ancestor in order to work reliably, and therefore the syntax will look a little different:

h1:not(div h1) { color: #900; }

Anyone who’s familiar with jQuery will quickly point out that this selector works in jQuery today. This is one of a number of disparities between Selector 3’s :not() and jQuery’s :not(), which Selectors 4 seeks to rectify.

More Related Contents:

  1. How can I style even and odd elements?
  2. Several elements with the same ID responding to one CSS ID selector
  3. How to target a specific column or row in CSS Grid Layout?
  4. CSS :selected pseudo class similar to :checked, but for elements
  5. Matching the first/nth element of a certain type in the entire document
  6. Using CSS :before and :after pseudo-elements with inline CSS?
  7. Difference in applying CSS to html, body, and the universal selector *?
  8. How can I correctly select the first or the last child with CSS?
  9. A CSS selector to get last visible div
  10. Using :before and :after CSS selector to insert HTML [duplicate]
  11. What is syntax for selector in CSS for next element?
  12. :nth-child(even/odd) selector with class [duplicate]
  13. How to CSS: select element based on inner HTML [duplicate]
  14. What are the priorities among CSS selectors
  15. Can a dynamic class be styled using CSS? [duplicate]
  16. Select first occurring element after another element
  17. Default :target with CSS
  18. Can a ::before selector be used with a ?
  19. Avoiding repeated constants in CSS
  20. Select second last element with css
  21. How do I give a CSS class priority over an id?
  22. How to run the CSS3 animation to the end if the selector is not matching anymore?
  23. Why does the general-sibling combinator allow toggling pseudo-element’s content, but not the adjacent-sibling?
  24. Is there a css selector for selecting an element futherup in the html?
  25. How to get CSS to select ID that begins with a string (not in Javascript)?
  26. Selecting the last element among various nested containers
  27. Is there a reason to use a instead of a:link or a:visited in my stylesheet?
  28. Zebra striping a flexbox table with wrapping items
  29. How to select classes with spaces
  30. CSS nth-match doesn’t work

Leave a Comment