¿Puede la pseudo-clase: not () tener múltiples argumentos?
Estoy tratando de seleccionar input
elementos de todos los type
s excepto radio
y checkbox
.
Muchas personas han demostrado que puedes poner múltiples argumentos en :not
, pero usar type
no parece funcionar de todos modos lo intento.
form input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
¿Alguna idea?
5 answers
Por qué: no solo use dos :not
:
input:not([type="radio"]):not([type="checkbox"])
Sí, es intencional
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-18 18:23:04
Si estás usando SASS en tu 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: lista los elementos ignorados inline
input {
/*non-ignored styling goes here*/
@include not('[type="radio"]','[type="checkbox"]'){
/*ignored styling goes here*/
}
}
Opción 2: enumere 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 de salida para cualquiera de las opciones
input {
/*non-ignored styling goes here*/
}
input:not([type="radio"]):not([type="checkbox"]) {
/*ignored styling goes here*/
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-03 02:09:51
A partir de CSS 4 usando múltiples argumentos en el selector :not
es posible ( ver aquí).
En CSS3, el selector :not solo permite 1 selector como argumento. En 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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-27 20:38:58
Estaba teniendo algunos problemas con esto, y el método "X:not():not()" no estaba funcionando 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 :not() estaba siendo pugnaz. No es ideal, pero es sólido.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-22 16:17:08
Si instala el plugin CSS post "cssnext" , entonces puede comenzar a usar la sintaxis que desea usar ahora mismo.
El uso de cssnext cambiará esto:
input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
En esto:
input:not([type="radio"]):not([type="checkbox"]) {
/* css here */
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-03 00:46:37