html - una - selectores css

¿Hay un CSS que no sea igual al selector?

Question

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

input {
 ... 
 ...
}

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

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

y luego simplemente omita esta etiqueta de CSS.

¿Como puedo hacer eso?

La única forma en que puedo ver sería agregar alguna clase a la etiqueta de entrada, y volver a escribir el CSS de la siguiente manera:

input.mod {
 ...
 ...
}

Answer 1

¡Interesante acaba de probar esto para seleccionar el elemento DOM usando JQuery y funciona! :)

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

Esta página tiene 168 divs que no tiene clase ''comment-copy''

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

Answer 2

CSS3 tiene :not() , pero aún no está implementado en todos los navegadores. 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ás que apegarte a los métodos pasados ​​de moda.

Answer 3

En CSS3, puede utilizar el filtro :not() , pero no todos los navegadores son totalmente compatibles con CSS3, así que asegúrese de saber qué está haciendo, que ahora es compatible con todos los navegadores principales (y lo ha sido durante bastante tiempo; es una respuesta antigua ...).

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 ya no debería ser necesaria; 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 4

También puede abordar esto al orientar un atributo como este:

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%.

Answer 5

También puedes hacer eso "revocando" los cambios en la clase de reinicio solo en CSS.

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

Answer 6

en lugar de class = "reset" puede invertir la lógica al tener class = "valid" Puede agregar esto por defecto y eliminar la clase para restablecer el estilo.

Por su ejemplo y Tomás

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"/>