pseudo clases clase _blank css css3 css-selectors

clases - target css



¿Puede: no() la pseudo-clase tener múltiples argumentos? (5)

Comenzando desde CSS 4 usando múltiples argumentos en el :not hace posible el selector ( ver aquí ).

En CSS3, el selector: not solo permite 1 selector como argumento. En los selectores de nivel 4, puede tomar una lista de selección como un 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 limited . Por ahora, solo funciona en safari.

Estoy tratando de seleccionar elementos de input de todo type , excepto radio y checkbox .

Muchas personas han demostrado que puedes poner varios argumentos en :not , pero el uso de type no parece funcionar de todos modos, lo intento.

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

¿Algunas ideas?


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

Acabé recurriendo a esta estrategia:

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

No es tan divertido, pero me funcionó cuando: no () estaba siendo agresivo. No es ideal, pero es sólido.


Por qué: no solo usar dos :not :

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

Si es intencional



Si está utilizando SASS en su proyecto, he creado esta combinación 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 utilizar de 2 maneras:

Opción 1: listar 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: listar los elementos ignorados en una variable primero

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

CSS de salida para cualquiera de las opciones

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