css comma separated selectors do not work for form input:not(...)

Question

CSS:

form input:not([type='button']),form input:not([type='submit']) { width: 200px }

HTML:

<form>
  <input type='button' value='button' />
  <input type='submit' value='submit' />
  <input type='text' value='text' />
</form>

Demo: http://jsbin.com/imibew/edit#javascript,html,live

Issue: all input elements are getting width of 200px, where I just want the input of type text to have 200px.

Quirk: if you just list one selector in the , and not have a comma separated list, it works correctly.

Question: can I use commas when using :not()'s in CSS? Using lists in the selector seems to break it.

Answer 1

The comma represents a logical OR in selector syntax. Each element will thus be matched against each part of your selector at a time, and if it satisfies at least one of those parts, the rule is applied.

So in your case, this is what happens:

1. The input[type='button'] will match your form input:not([type='submit']) selector

2. The input[type='submit'] will match your form input:not([type='button']) selector

3. The input[type='text'] will (obviously) match both selectors

That's why your rule gets applied to all your form inputs.

If you want to combine both negations, chain them like so, instead of using a comma-separated list:

form input:not([type='button']):not([type='submit']) { width: 200px }