Css comma separated selector not working 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

Problem : all input elements get 200px wide, where I just want the text input text to have 200px.

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

Question : can I use commas when using: not () in CSS? Using lists in a selector seems to violate it.

Answer 1

The comma is a logical OR in selector syntax. Thus, each element will be matched with each part of your selector at a time, and if it satisfies at least one of these parts, the rule applies.

So in your case this happens:

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

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

• input[type='text'] will (obviously) match both selectors

This is why your rule applies to all form inputs.

If you want to combine both negatives, concatenate them like this instead of using a comma separated list:

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