Existe um seletor CSS diferente de igual?

116

Existe algo como! = (Diferente) em CSS? por exemplo, eu tenho o seguinte código:

input {
 ... 
 ...
}

mas, para algumas entradas, preciso anular isso. Eu gostaria de fazer isso adicionando a classe "reset" à tag de entrada, por exemplo

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

e simplesmente pule esta tag do CSS.

Como posso fazer isso?

A única maneira que vejo seria adicionar alguma classe à tag de entrada e reescrever o CSS da seguinte maneira:

input.mod {
 ...
 ...
}
Alex Ivasyuv
fonte
Você respondeu sua pergunta, eu acho. Coloque o estilo em input.mod e adicione a classe 'mod' na tag de entrada desejada.
Nazmul

Respostas:

157

Em CSS3, você pode usar o :not()filtro, mas nem todos os navegadores suportam totalmente CSS3 ainda, então certifique-se de saber o que está fazendo, que agora é suportado por todos os principais navegadores (e tem sido por algum tempo; esta é uma resposta antiga ...).

Exemplo:

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

e o CSS

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

Observação: esta solução alternativa não deve ser mais necessária; Estou deixando aqui para contexto.

Se você não quiser usar CSS3, pode definir o estilo em todos os elementos e redefini-lo com uma classe.

input { background-color: green; }
input.avoidme { background-color: white; }
Tomas Aschan
fonte
OMG ... eu sabia que ele existia :) Sim, é! Obrigado.
Alex Ivasyuv
2
O suporte está faltando principalmente no IE8 (e versões mais antigas). Se alguém estiver interessado em um polyfill: selectivizr.com
franzlorenzon
1
@Guru: Você pode encadear vários :not()seletores: input:not(.avoidme):not(.avoidmetoo)evitará elementos com qualquer classe, input:not(.avoidme.andme)evitará elementos com ambas as classes.
Tomas Aschan
1
@TomasLycken, na verdade, usando vários seletores é um assunto delicado em CSS, por exemplo, :not(.this.that) { }podem funcionar, mas se você fizer algo, como :not(.this, .that) { }você vai cair, você tem que cadeia eles, tais como: :not(.this):not(.that). Eu entendo que você provavelmente sabe disso, estou tentando ajudar futuros leitores :)
Can O 'Spam
1
Deixando um comentário aqui para futuros leitores: o comentário de @SamSwift 웃 ainda é preciso, mas o suporte para listas está (talvez) chegando no futuro . Por enquanto, porém, apenas seletores únicos são suportados internamente :not().
Tomas Aschan
24

Você também pode fazer isso 'revertendo' as alterações na classe de redefinição apenas em CSS.

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

CSS3 tem :not(), mas ainda não está implementado em todos os navegadores. No entanto, é implementado no IE9 Platform Preview.

input:not(.reset) { }

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

Nesse ínterim, você terá que seguir os métodos antiquados.

Andy E
fonte
6

Você também pode abordar isso segmentando um atributo como este:

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

Neste caso, todas as entradas que não sejam do tipo 'caixa de seleção' terão uma largura de 100%.

Dylan Auty
fonte
4

Interessante apenas tentei isso para selecionar o elemento DOM usando JQuery e funcionou! :)

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

Esta página tem 168 divs que não possuem a classe 'comment-copy'

$("div[class!='comment-copy']").length => 168
$("div[class!='.comment-copy']").length => 168
Naveed
fonte
11
[attr!="value"]é um seletor somente jQuery api.jquery.com/attribute-not-equal-selector
xec
O que isso tem a ver com CSS?
devlin carnate de
@devlincarnate Os seletores "CSS" sangraram no JS (por volta de 2013 ), então as pessoas procuram por ele.
Nick T
0

em vez de class = "reset", você poderia inverter a lógica tendo class = "valid". Você pode adicionar isso por padrão e remover a classe para redefinir o estilo.

Então, de seu exemplo e Tomas '

input.valid {
 ... 
 ...
}

e

<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
fonte
2
Acho que toda a ideia de ser capaz de "redefinir" aplicando a uma classe era que o número de elementos que não deveriam ter o estilo padrão excedia em muito o que deveriam, então o OP não queria aplicar nenhuma classe a a maioria dos elementos.
Tomas Aschan