Can the not pseudo class have multiple arguments

Yes, the :not() pseudo-class selector can accept multiple selectors as its parameters. This allows specifying multiple conditions to exclude a set of elements. In the CSS Selectors Level 4 specification, :not() has been extended to accept a comma-separated list of selectors as its parameters, enabling it to exclude elements matching multiple selectors simultaneously.

For example, if you want to select

elements that are neither of the classes .class1 nor .class2, you can write:

css
p:not(.class1, .class2) {
  /* style rules */
}

In this example, any

elements with either the .class1 or .class2 class will not be selected, and all other

elements will have the styles defined here applied.

It's important to note that while the CSS Selectors Level 4 specification supports :not() with multiple parameters, not all browsers implement this feature. Therefore, when using it, you should check browser compatibility or use tools like PostCSS to convert these modern CSS features for compatibility with older browsers. When writing code, you should also consider fallback solutions to ensure the functionality works as intended.

If you have installed the 'cssnext' PostCSS plugin, you can safely begin using the syntax you intend to use now. https://cssnext.github.io/setup/ With cssnext, the syntax appears as follows:

shell
input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

Instead, it becomes:

shell
input:not([type="radio"]) :not([type="checkbox"]) {
  /* css here */
}

https://cssnext.github.io/features/#not-pseudo-class

The :not() pseudo-class selector can accept a single argument that consists of a comma-separated list of selectors. This enables specifying multiple conditions to exclude a set of elements. In the CSS Selectors Level 4 specification, :not() has been extended to allow it to accept such a comma-separated selector list as its argument, meaning it can exclude elements matching any of the specified selectors.

For example, if you want to select <p> elements that are neither of class .class1 nor of class .class2, you can write:

css
p:not(.class1, .class2) {
  /* style rules */
}

In this example, any <p> elements with either .class1 or .class2 will not be selected, and all other <p> elements will have the defined styles applied.

It is important to note that while the CSS Selectors Level 4 specification supports the :not() pseudo-class with multiple selectors, not all browsers implement this feature. Therefore, when using it, you should verify browser compatibility or employ tools like PostCSS to transform these modern CSS features for compatibility with older browsers. When writing code, consider implementing fallback solutions to ensure functionality remains usable.

I've run into some trouble with this. The 'X:not():not()' approach isn't working for me.

I eventually adopted this strategy:

css
INPUT {
    /* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
    /* styles to override previous styles */
}

It's not very interesting, but when :not() works effectively for me, it does work.

It's not ideal, but it's solid.

If you're working with SASS in your project, I created this mixin to function as intended:

@mixin not($ignorList...) { //if only a single value is provided @if (length($ignorList) == 1){ //it is likely a list variable, so assign the ignore list to the variable $ignorList: nth($ignorList,1); } //initialize an empty $notOutput variable $notOutput: ''; //for each item in the list @each $not in $ignorList { //generate a :not([ignored_item]) segment for each item in the ignore list and concatenate them $notOutput: $notOutput + ':not(#{$not})'; } //output the complete :not() rule including all ignored items &#{$notOutput} { @content; } }

It can be used in two ways:

Option 1: Listing Ignored Items Inline

scss
input {
  /*non-ignored styling goes here*/
  @include not('[type="radio"]','[type="checkbox"]'){
    /*ignored styling goes here*/
  }
}

Option 2: Defining Ignored Items in a Variable First

scss
$ignoredItems:
  '[type="radio"]',
  '[type="checkbox"]'
;

input {
  /*non-ignored styling goes here*/
  @include not($ignoredItems){
    /*ignored styling goes here*/
  }
}

Output CSS for Either Option

css
input {
    /*non-ignored styling goes here*/
}

input:not([type="radio"]:not([type="checkbox"]) {
    /*ignored styling goes here*/
}