web-dev-qa-db-fra.com

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

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

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

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

Des idées?

csscss3css-selectors
703
delphi

Pourquoi: pas simplement utiliser deux :not:

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

Oui, c'est intentionnel

1449
Felix Kling

Si vous utilisez SASS dans votre projet, j'ai construit ce mixin pour qu'il fonctionne comme nous le voulons 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: 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: listez d'abord les éléments ignorés d'une variable

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

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

CSS généré pour l'une ou l'autre option

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

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

À partir de CSS 4, utiliser plusieurs arguments dans le sélecteur :not devient possible ( voir ici ).

En CSS3, le sélecteur: not permet seulement 1 sélecteur en argument. Dans les sélecteurs de niveau 4, une liste de sélecteurs peut être utilisée 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.

28
Pieter Meiresone

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

J'ai fini par avoir recours à 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: not () était pugnace. Ce n'est pas idéal, mais c'est solide.

7
eatCasserole

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

Utiliser cssnext transformera ceci:

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

Dans ceci:

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

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

4
Daniel Tonon