What is the difference between these two selectors using “:not”?

Question

What is the difference between these two selectors?

input:not([type="radio"][type="submit"])
input:not([type="radio"]):not([type="submit"])

Will an <input> tag that has no type attribute be selected?

I’ve read:

• Css pseudo classes input:not(disabled)not:[type="submit"]:focus

• CSS: multiple attribute selector

Answer 1

Quoting the Selector Level 4 docs:

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

Note: In Selectors Level 3, only a single simple selector was allowed as the argument to :not().

That explains why this...

input:not([type="radio"][type="submit"])

... is not supported in any browser that doesn't implement this part of CSS4 specs (as far as I know, no one does at this point of time; it's only a working draft, after all). But the logic is flawed in this selector, too: even if syntax was supported universally, it should have been written as...

input:not([type="radio"],[type="submit"])

See, [foo][bar] rule is treated as requirement for any element to be both foo and bar. But (of course!) it's not possible for any input to be both of radio and submit type.

The bottom line: you'll have to use...

input:not([type="radio"]):not([type="submit"])

... because CSS3 only supports simple selectors in :not.

Answer 2

This line seems to be invalid, as multiple [] don't seem to pass the W3C validation service for CSS:

input:not([type="radio"][type="submit"])

This line, however, is valid and simply excludes any element of either of the two types, but selects any other that is an input:

input:not([type="radio"]):not([type="submit"])

I can't find any evidence for it in the documentation on the :not selector however. If you want to test validation, heres a link to the W3C Validator: https://jigsaw.w3.org/css-validator/ .

Now, lets test this in a snippet

input {
  border: 1px solid blue;
}
#valid input:not([type="radio"]):not([type="submit"]){
  border-color: red;
}
#invalid input:not([type="radio"][type="submit"]){
  border-color: red;
}

<div id="valid">
  <pre><strong>Valid:</strong> input:not([type="radio"]):not([type="submit"])</pre>
  <input type="text" />
  <input type="submit" />
  <input type="radio" />
</div>
<div id="invalid">
  <pre><strong>Invalid:</strong> input:not([type="radio"][type="submit"])</pre>
  <input type="text" />
  <input type="submit" />
  <input type="radio" />
</div>