¿Hay un CSS no igual al selector?

Question

¿Hay algo como! = (No igual) en CSS? por ejemplo, tengo el siguiente código:

input { 
... 
... 
} 

pero para algunas entradas que necesito para anular esto. Me gustaría hacer eso agregando la clase "restablecer" a la etiqueta de entrada, p.

<input class="reset" ... /> 

y luego simplemente omitir esta etiqueta de CSS.

¿Cómo puedo hacer eso?

La única forma que veo sería añadir un poco de clase a la etiqueta de entrada, y volver a escribir el CSS de la siguiente manera:

input.mod { 
... 
... 
} 

Answer 1

En CSS3, puede utilizar el filtro :not(), pero no todos los navegadores son totalmente compatibles con CSS3 todavía, así que asegúrese de saber lo que estás haciendo que ahora es supported by all major browsers (y ha sido desde hace bastante tiempo, lo es una respuesta anterior ...).

Ejemplo:

<input type="text" value="will be matched" /> 
<input type="text" value="will not be matched" class="avoidme" /> 
<input type="text" value="will be matched" /> 

y el CSS

input:not(.avoidme) { background-color: green; } 

---

Nota: esta solución no debería ser necesario más; Lo dejo aquí por contexto.

Si no desea usar CSS3, puede establecer el estilo en todos los elementos y luego restablecerlo con una clase.

input { background-color: green; } 
input.avoidme { background-color: white; } 

Answer 2

También puede hacer que al 'revertir' los cambios en la clase de reinicio solo en CSS

INPUT { 
    padding: 0px; 
} 
INPUT.reset { 
    padding: 4px; 
} 

Answer 3

CSS3 tiene :not(), pero no está implementado en todos los navegadores todavía. Sin embargo, se implementa en la Vista previa de la plataforma IE9.

input:not(.reset) { } 

http://www.w3.org/TR/css3-selectors/#negation

Mientras tanto, tendrá que atenerse a los métodos anticuados.

Answer 4

en lugar de class = "reset" lo que pueda invertir la lógica por tener class = "válida" Puede agregar esto por defecto y eliminar la clase para restablecer el estilo.

Así que de su ejemplo y Tomas'

input.valid { 
... 
... 
} 

y

<input type="text" value="will be matched" class="valid"/> 
<input type="text" value="will not be matched" /> 
<input type="text" value="will be matched" class="valid"/> 

Answer 5

interesante acaba de intentar esto para seleccionar elemento DOM con jQuery y funciona!:)

$("input[class!='bad_class']"); 

Esta página cuenta con 168 divs que no tienen clase 'comment-copia'

$("div[class!='comment-copy']").length => 168 
$("div[class!='.comment-copy']").length => 168 

Answer 6

También puede acercarse a esta apuntando a un atributo de esta manera:

input:not([type=checkbox]){ width:100%; }

En este caso, todas las entradas que no sean del tipo 'casilla de verificación' tendrán un ancho del 100%.