CSS

[Solved – 3 Answers] CSS – Can we have multiple :not() selectors

  • We trying to select input elements of all types except radio and checkbox.
    Many people have shown that you can put multiple arguments in :not, but using type doesn’t seem to work.
css code
form input:not([type="radio"], [type="checkbox"])
{
/* css here */
}

Any ideas?


• Why :not just use two :not:

css code
input:not([type="radio"]):not([type="checkbox"])

For SASS :

css code
@mixin not($ignorList...) 
{
    //if only a single value given
    @if (length($ignorList) == 1)
{
        //it is probably a list variable so set ignore list to the variable
        $ignorList: nth($ignorList,1);
    }
    //set up 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 put them back to back
        $notOutput: $notOutput + ':not(#{$not})';
    }
    //output the full :not() rule including all ignored items
    &#{$notOutput} 
{
        @content;
    }
}
  • It can be used in 2 ways:

list the ignored items inline :

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

list the ignored items in a variable first :

css code
$ignoredItems:
  '[type="radio"]',
  '[type="checkbox"]';
input {
  /*non-ignored styling goes here*/
  @include not($ignoredItems)
{
    /*ignored styling goes here*/
  }
}

Outputted CSS for either option

 

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

• The “X:not():not()” method wasn’t working
• we ended up resorting to this strategy:

css code
INPUT
{
/* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"]
{
/* styles that reset previous styles */
}

• It worked when :not() was being pugnacious. It’s not ideal, but it’s solid.

About the author

Wikitechy Editor

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

Add Comment

Click here to post a comment