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


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

Beaucoup de gens ont montré que vous pouvez mettre plusieurs arguments dans :notmais en utilisant type ne semble pas fonctionner de toute façon je l'essaie.

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

Des idées?


581
2018-04-16 02:43


origine


Réponses:


Pourquoi: n'utilisez pas seulement deux :not:

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

Oui, c'est intentionnel


1187
2018-04-16 02:45



Si vous utilisez SASS dans votre projet, j'ai construit ce mixin 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 façons:

Option 1: liste 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: liste 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 édité pour l'une ou l'autre option

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

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

36
2018-05-15 01:36



À partir de CSS 4 en utilisant plusieurs arguments dans le :not le sélecteur devient possible (vois ici).

En CSS3, le: not selector n'autorise qu'un 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 du navigateur est limité. Pour l'instant, cela ne fonctionne que dans Safari.


11
2017-08-27 20:38



J'avais quelques problèmes avec cela, 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 ça a marché pour moi quand: pas () était pugnace. Ce n'est pas idéal, mais c'est solide.


5
2017-10-22 16:17