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

Question

J'essaie de sélectionner input éléments de tous les type sauf radio et checkbox .

De nombreuses personnes ont montré qu'il est possible de mettre plusieurs arguments en :not mais en utilisant type ne semble pas fonctionner de toutes les façons que j'essaie.

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

Des idées ?

Answer 1

Pourquoi : ne pas simplement utiliser deux :not :

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

_{<em>Oui, c'est intentionnel</em>}

Answer 2

Si vous utilisez SASS dans votre projet, j'ai créé ce mixin pour qu'il fonctionne 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 façons :

Option 1 : lister 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 : lister 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 des options

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

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

Answer 3

À partir de la version 4 de CSS Selectors, l'utilisation d'arguments multiples dans la balise :not devient possible ( voir ici ).

En CSS3, le sélecteur :not n'accepte qu'un seul sélecteur comme argument. Dans les sélecteurs de niveau 4, il peut prendre une liste de sélecteurs comme argument.

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, le support des navigateurs est limitée . Pour l'instant, il ne fonctionne que dans Safari.

Answer 4

J'avais quelques 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 */
}

C'est loin d'être aussi amusant, mais ça a marché pour moi quand :not() était pugnace. Ce n'est pas idéal, mais c'est solide.

Answer 5

Si vous installez le plugin "cssnext" Post CSS vous pouvez alors commencer à utiliser la syntaxe que vous souhaitez utiliser dès maintenant.

L'utilisation de cssnext transformera cela :

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

Dans ça :

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

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