¿Hay un selector de CSS no igual?

116

¿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 "reset" 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 reescribir el CSS de la siguiente manera:

input.mod {
 ...
 ...
}
Alex Ivasyuv
fuente
Respondió a su pregunta, creo. Ponga el estilo en input.mod y agregue la clase 'mod' en la etiqueta de entrada deseada.
Nazmul

Respuestas:

157

En CSS3, puede usar el :not()filtro, pero no todos los navegadores son totalmente compatibles con CSS3 todavía, así que asegúrese de saber lo que está haciendo, que ahora es compatible con todos los navegadores principales (y lo ha sido durante bastante tiempo; esta 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 alternativa ya no debería ser necesaria; Lo dejo aquí por contexto.

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

input { background-color: green; }
input.avoidme { background-color: white; }
Tomas Aschan
fuente
Dios mío ... Sabía que existe :) ¡Sí, lo es! Gracias.
Alex Ivasyuv
2
Falta el soporte principalmente de IE8 (y versiones anteriores). Si alguien está interesado en un polyfill: selectivizr.com
franzlorenzon
1
@Guru: Puede encadenar múltiples :not()selectores: input:not(.avoidme):not(.avoidmetoo)evitará elementos con cualquiera de las clases, input:not(.avoidme.andme)evitará elementos con ambas clases.
Tomas Aschan
1
@TomasLycken, en realidad, el uso de múltiples selectores es un asunto difícil en CSS, por ejemplo, :not(.this.that) { }el trabajo puede, pero si lo hace algo, como :not(.this, .that) { }te vas a caer hacia abajo, usted tiene que daisy chain ellos, tales como: :not(.this):not(.that). Entiendo que probablemente sepa esto, estoy tratando de ayudar a futuros lectores :)
Can O 'Spam
1
Dejando un comentario aquí para futuros lectores: el comentario de @SamSwift 웃 sigue siendo correcto, pero el soporte para listas (tal vez) llegue en el futuro . Por ahora, sin embargo, solo se admiten selectores individuales en el interior :not().
Tomas Aschan
24

También puede hacerlo "revertiendo" los cambios en la clase de reinicio solo en CSS.

INPUT { 
    padding: 0px;
}
INPUT.reset {
    padding: 4px;
}
AvatarKava
fuente
8

CSS3 tiene :not(), pero aún no está implementado en todos los navegadores. Sin embargo, está implementado en la versión preliminar de la plataforma IE9.

input:not(.reset) { }

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

Mientras tanto, tendrás que ceñirte a los métodos anticuados.

Andy E
fuente
6

También puede abordar esto apuntando a 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%.

Dylan Auty
fuente
4

Interesante, solo probé esto para seleccionar el elemento DOM usando JQuery y ¡funciona! :)

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

Esta página tiene 168 divs que no tienen la clase 'comentario-copia'

$("div[class!='comment-copy']").length => 168
$("div[class!='.comment-copy']").length => 168
Naveed
fuente
11
[attr!="value"]es un selector de solo jQuery api.jquery.com/attribute-not-equal-selector
xec
¿Qué tiene esto que ver con CSS?
devlin carnate
Los selectores de @devlincarnate "CSS" se han desangrado en JS ( alrededor de 2013 ) por lo que la gente lo busca.
Nick T
0

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

Entonces de tu ejemplo y el de 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"/>
Qazzian
fuente
2
Creo que la idea de poder "restablecer" aplicando a una clase era que la cantidad de elementos que no deberían tener el estilo predeterminado excedía en gran medida a los que deberían, por lo que el OP no quería aplicar ninguna clase a la mayoría de los elementos.
Tomas Aschan