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


Estoy tratando de seleccionar input elementos de todos types excepto radio y checkbox.

Muchas personas han demostrado que puedes poner múltiples argumentos en :not, pero usando type no parece funcionar de todos modos lo intento.

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

¿Algunas ideas?


581
2018-04-16 02:43


origen


Respuestas:


Por qué: no solo use dos :not:

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

Sí, es intencional


1187
2018-04-16 02:45



Si está utilizando SASS en su proyecto, he creado este mixin para que funcione de la manera que 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 usar de 2 maneras:

Opción 1: enumerar 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: enumerar primero 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 emitido para cualquier opción

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

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

36
2018-05-15 01:36



A partir de CSS 4 usando múltiples argumentos en el :not selector es posible (mira aquí)

En CSS3, el selector: not solo permite 1 selector como argumento. En los selectores de nivel 4, puede tomar una lista de selectores 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.


11
2017-08-27 20:38



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

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: no () estaba siendo belicoso. No es ideal, pero es sólido.


5
2017-10-22 16:17