La pseudo-classe: not () può avere più argomenti?

746

Sto cercando di selezionare inputelementi di tutti typei messaggi tranne radioe checkbox.

Molte persone hanno dimostrato che puoi inserire più argomenti :not, ma l'utilizzo typenon sembra funzionare comunque, lo provo.

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

Qualche idea?

css css-selectors

— Delphi
fonte

24

"Molte persone hanno dimostrato che è possibile inserire più argomenti: non" O quelle persone stavano citando un certo articolo a cui viene comunemente fatto riferimento ma gravemente fuorviante, o stavano parlando di jQuery, non di CSS. Si noti che il selettore fornito è in effetti valido in jQuery, ma non in CSS. Ho scritto una domanda e risposta in dettaglio le differenze: stackoverflow.com/questions/10711730/… (la risposta menziona anche l'articolo a lato)

— BoltClock

10

Congratulazioni! Hai scritto con successo CSS4.0 valido nel tuo esempio sopra 2 anni prima che uscisse l'edizione ufficiale.

— Jack Giffin,

1

@Jack Giffin: a quale "edizione ufficiale" ti riferisci? Questa domanda precede solo il FPWD dei selettori-4 di 5 mesi e le specifiche non sono ancora quasi completate: w3.org/TR/2011/WD-selectors4-20110929/#negation E prevale la prima implementazione di 4 anni e mezzo : stackoverflow.com/questions/35993727/...

— BoltClock

1537

Perché: non usare solo due :not:

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

_{Sì, è intenzionale}

— Felix Kling
fonte

4

Questo ha un'alta specificità.

— Distruzione

63

Per coloro che non hanno l'umorismo: ha detto "Perché no ..." con il :personaggio.

— totymedli,

11

Come nota a margine, se fai qualcosa come input:not('.c1'), input:not('c2')te finisci con una situazione "e" in cui entrambe le classi dovrebbero essere sull'input affinché corrisponda.

— Cloudkiller

3

@BoltClock Ritardato, ma da qui anche il desiderio del :not([attr],[attr])formato CSV :-P

— TylerH,

3

@Cloudkiller no che selezionerebbe qualsiasi elemento di input -> "input senza la classe c1 OR input senza la classe c2"

— David Callanan

48

Se stai usando SASS nel tuo progetto, ho creato questo mixin per farlo funzionare come tutti noi desideriamo:

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

può essere utilizzato in 2 modi:

Opzione 1: elenca gli elementi ignorati in linea

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

Opzione 2: elenca prima gli elementi ignorati in una variabile

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

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

CSS in uscita per entrambe le opzioni

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

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

— Daniel Tonon
fonte

6

non è un po 'come chiedere a un boscaiolo di andare al negozio di ferramenta invece di procurarsi la legna?

— Osirisgothra,

Che cosa? quindi preferiresti scrivere .selector: not (.one): not (.two): not (.three): not (.four) {...} di .selector {@include not ('. one', ' .two ','. three ','. four ') {...}}?

— Daniel Tonon,

2

In termini di efficienza: sì. Molto meno 'caratteri e imo codice più efficiente.

— Daan,

:not()= 6 caratteri per articolo; '',= 3 caratteri per articolo. @includedovrebbe essere assegnato a un tasto di scelta rapida, quindi lo considero un carattere (in termini di digitazione). Tecnicamente non penso nemmeno che tu debba usare le virgolette singole nell'elenco se le odi così tanto. Aiutano però a impedire agli editori di andare fuori di testa. Sulla base di ciò, penso ancora che il mio modo sia il modo più efficiente di scrivere per scriverlo.

— Daniel Tonon,

2

@DaanHeskes anche che scrivere tutti i casi: not () non ti consente di usare una variabile per elencarli.

— pl00

30

A partire da CSS Selector 4 è possibile utilizzare più argomenti nel :notselettore ( vedere qui ).

In CSS3, il selettore: not consente solo 1 selettore come argomento. Nei selettori di livello 4, può prendere un elenco di selettori come argomento.

Esempio:

/* 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;
}

Sfortunatamente, il supporto del browser è limitato . Per ora funziona solo in Safari.

— Pieter Meiresone
fonte

3

secondo caniuse.com , è ancora supportato solo da Safari

— calunnia il

8

Tieni presente i suoi selettori CSS di livello 4, non CSS 4, non esiste CSS 4 e probabilmente non esisterà mai.

— Edu Ruiz,

8

Ho avuto qualche problema con questo, e il metodo "X: not (): not ()" non funzionava per me.

Ho finito per ricorrere a questa strategia:

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

Non è così divertente, ma ha funzionato per me quando: not () era pugnace. Non è l'ideale, ma è solido.

— eatCasserole
fonte

5

Se installi il plug-in Post CSS "cssnext" , puoi tranquillamente iniziare a utilizzare la sintassi che desideri utilizzare in questo momento.

L'uso di cssnext trasformerà questo:

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

In questo:

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

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

— Daniel Tonon
fonte