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>

Answer 3

here i just try for the difference

i tried 4 ways in the below jsfiddle as you can see with the comments in

$(document).ready(function(){
    
    //applied using jquery
    
    $('.usingJquery input:not([type="radio"],[type="submit"])').css({
        'background-color' : 'cadetblue',
        'border' : 'dotted #7FFF00'
    });
})

input {
  padding: 10px;
  margin: 10px;
}

/*will apply the only first one so border and background will be applied all input types exluding radio type*/
input:not([type="radio"]) , input:not([type="submit"]){
    border:1px solid grey;
    background-color : green;
}

/*this will not work as you can not apply multiple in same parantheses as i think*/
input:not([type="radio"][type="submit"]){
    border:1px solid green;
}

/*as i think for above code i tried using " , (comma)" seprator but it also didn't work*/
input:not([type="radio"],[type="submit"]){
    border:1px solid aqua;
}

/*this will work as you can see */
input:not([type="radio"]):not([type="submit"]){
    border:1px solid red;   
    background-color : yellow;
}

<input type="radio">
<input type="submit">
<input type="file">
<input type="text">
<input type="checkbox">

    <div class="usingJquery">
        <input type="radio">
        <input type="submit">
        <input type="file">
        <input type="text">
        <input type="checkbox">
    </div>          

and here is the demo code for this explaination

See Demo

and what i found is from 2 questions of the jsfiddle that are linked below

Refer for input:not(selector):not(selector)

And if you want to try input:not([type="radio"][type="submit"]) selector using jquery with comma "," separation for that you may refer

Refer for using jquery