¿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 {
 ...
 ...
}

html css css-selectors

— 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

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