CSS “not” selector does not work

Hello,
I can not put two different rule in the "not" selector.
Example:
This code works:
input:not([type=submit]) {
  // Styling here
}
but this code does not work:
input:not([type=submit], [type=reset]) {
  // Styling here
}

Why the second code does not work?

Comments

  • From W3 website: "The negation pseudo-class, :not(X), is a functional notation taking a simple selector". It says "simple selector" so it accepts just one element, not more.
  • Hi,
    The :not only accepts a simple selector inside its parentheses, but you should be able to chain a couple together, since the rules are applied from left to right. usually.
    input:not([type=submit]):not([type=reset]) {
      // Styling here
    }
    
    I haven't seen any documentation on this chaining for pseudo elements but it makes sense, and I tested it on Mozilla ok. However, I'd always use :not as a last resort, when classes, or some other form of style inheritance is too inefficient.
    Cheers
  • Your problem solution is use : instead of , for your second css code.
Sign In or Register to comment.