¿Puede la pseudoclase: not () tener múltiples argumentos?

746

Estoy tratando de seleccionar inputelementos de todos los types excepto radioycheckbox .

Muchas personas han demostrado que puedes poner múltiples argumentos :not, pero el uso typeno parece funcionar de todos modos, lo intento.

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

¿Algunas ideas?

css css-selectors

— Delphi
fuente

24

"Muchas personas han demostrado que puedes poner múltiples argumentos en: no" O esas personas estaban citando un determinado artículo al que se hace referencia popularmente pero que es gravemente engañoso, o estaban hablando de jQuery, no de CSS. Tenga en cuenta que el selector dado es de hecho válido en jQuery, pero no en CSS. Escribí un Q&A detallando las diferencias: stackoverflow.com/questions/10711730/… (la respuesta también menciona ese artículo al costado)

— BoltClock

10

¡Felicidades! Ha escrito correctamente CSS4.0 válido en su ejemplo anterior 2 años antes de que saliera la edición oficial.

— Jack Giffin

1

@ Jack Giffin: ¿A qué "edición oficial" te refieres? Esta pregunta solo es anterior a la FPWD de los selectores-4 por 5 meses, y la especificación aún no está cerca de completarse: w3.org/TR/2011/WD-selectors4-20110929/#negation Y es anterior a la primera implementación por 4 años y medio : stackoverflow.com/questions/35993727/…

— BoltClock

1537

Por qué: no solo use dos :not:

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

_{Sí, es intencional}

— Felix Kling
fuente

44

Esto tiene una alta especificidad.

— Desvío

63

Para aquellos que no entienden el humor: dijo "¿Por qué no ...?" Con el :personaje.

— totymedli

11

Como nota al margen, si hace algo así input:not('.c1'), input:not('c2'), termina con una situación "y" en la que ambas clases tendrían que estar en la entrada para que coincida.

— Cloudkiller

3

@BoltClock Demorado, pero, de ahí el deseo del :not([attr],[attr])formato CSV también

— :-P

3

@Cloudkiller no, eso seleccionaría cualquier elemento de entrada -> "entrada sin la clase c1 O entrada sin la clase c2"

— David Callanan

48

Si está utilizando SASS en su proyecto, he creado este mixin para que funcione como todos queremos:

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

Se puede utilizar de 2 maneras:

Opción 1: enumere los elementos ignorados en línea

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

Opción 2: primero enumere los elementos ignorados en una variable

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

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

CSS de salida para cualquier opción

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

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

— Daniel Tonon
fuente

66

¿No es eso como pedirle a un leñador que vaya a la ferretería para obtener su madera?

— osirisgothra

¿Qué? así que preferiría escribir .selector: not (.one): not (.two): not (.three): not (.four) {...} que .selector {@include not ('. one', ' .dos tres cuatro') { ... } } ?

— Daniel Tonon

2

En términos de eficiencia: sí. Mucho menos 'caracteres y un código más eficiente.

— Daan

:not()= 6 caracteres por artículo; '',= 3 caracteres por artículo. @includedebe asignarse a una tecla de acceso rápido, así que voy a contar eso como un carácter (en términos de escribirlo). Técnicamente, no creo que necesite usar las comillas simples en la lista si las odia tanto. Sin embargo, ayudan a evitar que los editores se vuelvan locos. En base a eso, sigo pensando que mi forma es la manera más eficiente de escribir.

— Daniel Tonon

2

@DaanHeskes también dice que escribir todos los casos: not () no le permite usar una variable para enumerarlos.

— plong0

30

A partir de CSS Selectores 4, es posible usar múltiples argumentos en el :notselector ( ver aquí ).

En CSS3, el selector: no solo permite 1 selector como argumento. En los selectores de nivel 4, puede tomar una lista de selector como argumento.

Ejemplo:

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

Desafortunadamente, el soporte del navegador es limitado . Por ahora, solo funciona en Safari.

— Pieter Meiresone
fuente

3

de acuerdo con caniuse.com , todavía solo es compatible con Safari

— slanden

8

Tenga en cuenta sus selectores CSS Nivel 4, no CSS 4, no existe tal cosa como CSS 4 y probablemente nunca existirá.

— Edu Ruiz

8

Estaba teniendo algunos problemas con esto, y el método "X: not (): not ()" no funcionaba para mí.

Terminé recurriendo a esta estrategia:

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

No es tan divertido, pero funcionó para mí cuando: () estaba siendo pugnaz. No es ideal, pero es sólido.

— comer cacerola
fuente

5

Si instala el complemento CSS CSS "cssnext" , puede comenzar a utilizar de forma segura la sintaxis que desea utilizar en este momento.

Usar cssnext convertirá esto:

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

Dentro de esto:

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

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

— Daniel Tonon
fuente