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 instala el complemento CSS "cssnext" , entonces puede comenzar a usar la sintaxis que desea usar en este momento.
Usando cssnext se convertirá esto:
input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
Dentro de esto:
input:not([type="radio"]):not([type="checkbox"]) {
/* css here */
}
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*/
}