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

746

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?

css css-selectors Delphes
la source
24
"Beaucoup de gens ont montré que vous pouvez mettre plusieurs arguments dans: non" Soit ces personnes citaient un certain article référencé mais gravement trompeur, soit elles parlaient de jQuery, pas de CSS. Notez que le sélecteur donné est en fait valide dans jQuery, mais pas dans CSS. J'ai écrit un Q&A détaillant les différences: stackoverflow.com/questions/10711730/… (la réponse mentionne également cet article sur le côté)
BoltClock
10
Toutes nos félicitations! Vous avez écrit avec succès CSS4.0 valide dans votre exemple ci-dessus 2 ans avant la sortie de l'édition officielle.
Jack Giffin
1
@Jack Giffin: De quelle "édition officielle" parlez-vous? Cette question ne date que de 5 mois le FPWD des sélecteurs-4, et la spécification est encore loin d'être terminée: w3.org/TR/2011/WD-selectors4-20110929/#negation Et elle est antérieure à la première mise en œuvre par 4 ans et demi : stackoverflow.com/questions/35993727/…
BoltClock

Réponses:

1537

Pourquoi: pas seulement deux :not:

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

Oui, c'est intentionnel

Felix Kling
la source
4
Cela a une spécificité élevée.
Undistraction
63
Pour ceux qui n'ont pas l'humour: il a dit "Pourquoi pas ..." avec le :personnage.
totymedli du
11
En remarque, si vous faites quelque chose comme input:not('.c1'), input:not('c2')vous vous retrouvez avec une situation "et" où les deux classes devraient être sur l'entrée pour que cela corresponde.
Cloudkiller
3
@BoltClock Retardé, mais, d'où le désir pour le :not([attr],[attr])format CSV aussi :-P
TylerH
3
@Cloudkiller no qui sélectionnerait n'importe quel élément d'entrée -> "entrée sans la classe c1 OU entrée sans la classe c2"
David Callanan
48

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*/
}
Daniel Tonon
la source
6
N'est-ce pas un peu comme demander à un bûcheron d'aller à la quincaillerie pour récupérer son bois?
osirisgothra
Quelle? vous préférez donc écrire .selector: not (.one): not (.two): not (.three): not (.four) {...} plutôt que .selector {@include not ('. one', ' .deux trois quatre') { ... } } ?
Daniel Tonon
2
En termes d'efficacité: oui. Beaucoup moins de 'caractères et un code imo plus efficace.
Daan du
:not()= 6 caractères par élément; '',= 3 caractères par article. @includedevrait être attribué à une touche de raccourci, donc je vais compter cela comme un seul caractère (en termes de frappe). Techniquement, je ne pense pas que vous ayez même besoin d'utiliser les guillemets simples dans la liste si vous les détestez autant. Ils aident à empêcher les éditeurs de paniquer. Sur cette base, je pense toujours que mon chemin est le moyen le plus efficace d'écrire.
Daniel Tonon
2
@DaanHeskes indique également que l'écriture de tous les cas: not () ne vous permet pas d'utiliser une variable pour les répertorier.
plong0
30

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.

Pieter Meiresone
la source
3
selon caniuse.com , il n'est toujours pris en charge que par Safari
slanden
8
Gardez à l'esprit ses CSS Selectors Level 4, pas CSS 4, il n'existe pas de CSS 4 et il n'existera probablement jamais.
Edu Ruiz
8

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.

mangerCasserole
la source