La pseudo-classe: not () peut-elle avoir plusieurs arguments?

J'essaie de sélectionner des inputéléments de tous les types sauf radioet checkbox.

Beaucoup de gens ont montré que vous pouvez mettre plusieurs arguments :not, mais l'utilisation typene semble pas fonctionner de toute façon, je l'essaie.

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

Des idées?

Pourquoi: pas seulement deux :not:

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

_{Oui, c'est intentionnel}

Si vous utilisez SASS dans votre projet, j'ai construit ce mixage pour le faire fonctionner comme nous le souhaitons tous:

@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;
    }
}

il peut être utilisé de 2 manières:

Option 1: répertorier les éléments ignorés en ligne

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

Option 2: répertoriez d'abord les éléments ignorés dans une variable

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

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

CSS en sortie pour l'une ou l'autre option

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

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

Partir de CSS Selectors 4 en utilisant plusieurs arguments dans le :notsélecteur devient possible ( voir ici ).

En CSS3, le sélecteur: not n'autorise que 1 sélecteur comme argument. Dans les sélecteurs de niveau 4, il peut prendre comme argument une liste de sélecteurs.

Exemple:

/* In this example, all p elements will be red, except for 
   the first child and the ones with the class special. */

p:not(:first-child, .special) {
  color: red;
}

Malheureusement, la prise en charge du navigateur est limitée . Pour l'instant, cela ne fonctionne que dans Safari.

J'avais des problèmes avec ça, et la méthode "X: not (): not ()" ne fonctionnait pas pour moi.

J'ai fini par recourir à cette stratégie:

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

Ce n'est pas aussi amusant, mais cela a fonctionné pour moi quand: pas () était pugnace. Ce n'est pas idéal, mais c'est solide.

Si vous installez le plugin CSS "cssnext" Post , vous pouvez alors commencer à utiliser la syntaxe que vous souhaitez utiliser en toute sécurité.

L'utilisation de cssnext changera ceci:

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

En cela:

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

http://cssnext.io/features/#not-pseudo-class