Combining :not() selectors in CSS

by

Selectors level 3 does not allow anything more than a single simple selector within a :not() pseudo-class. As a jQuery selector, it works because jQuery extends its :not() functionality to allow any selector (like the .not() method).

However, your second syntax is one of the proposed enhancements to :not() in Selectors 4, and works equivalently to your first. Although the example (shown as of this writing anyway) shows a chain of :not() selectors, the proposal says:

The negation pseudo-class, :not(X), is a functional notation taking a selector list as an argument. It represents an element that is not represented by its argument.

Here a selector list is simply a comma-separated list of selectors.

If you need to negate selectors that contain combinators (>, +, ~, space, etc, for example div p), you can’t use :not() in CSS; you’ll have to go with the jQuery solution.

More Related Contents:

  1. Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
  2. Is there a CSS selector for text nodes?
  3. How do I select the “last child” with a specific class name in CSS? [duplicate]
  4. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  5. Can the :not() pseudo-class have multiple arguments?
  6. How to combine class and ID in CSS selector?
  7. :first-child not working as expected
  8. What is the difference between :first-child and :first-of-type?
  9. Does CSS have a :blur selector (pseudo-class)?
  10. Specify multiple attribute selectors in CSS
  11. Should I use single or double colon notation for pseudo-elements?
  12. How to make Internet Explorer 8 to support nth child() CSS element?
  13. What does a[href^=”…”] do in CSS?
  14. Universal selector * and pseudo elements
  15. Browser support for CSS :first-child and :last-child
  16. CSS selector to get deepest element of specific class in the HTML tree
  17. CSS Specificity and Inheritance
  18. How do I get the nth child of an element using CSS2 selectors?
  19. Difference between the selectors div + p (plus) and div ~ p (tilde)
  20. What’s the difference between CSS3’s :root pseudo class and html?
  21. What does .container.\31 25\25 mean in CSS?
  22. CSS combinator precedence?
  23. What is caret symbol ^ used for in css when selecting elements?
  24. Why are my CSS properties being overridden/ignored?
  25. What is the difference between p:nth-child(2) and p:nth-of-type(2)?
  26. CSS specificity or inheritance?
  27. How to skip first child?
  28. How to select all elements whose ID starts and ends with specific strings?
  29. selector for nth nested elements
  30. Latest on CSS parent selector [duplicate]

Leave a Comment