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 {
...
...
}
html
css
css-selectors
Alex Ivasyuv
fonte
fonte
Respostas:
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:
e o CSS
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.
fonte
:not()
seletores:input:not(.avoidme):not(.avoidmetoo)
evitará elementos com qualquer classe,input:not(.avoidme.andme)
evitará elementos com ambas as classes.: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 :):not()
.Você também pode fazer isso 'revertendo' as alterações na classe de redefinição apenas em CSS.
fonte
CSS3 tem
:not()
, mas ainda não está implementado em todos os navegadores. No entanto, é implementado no IE9 Platform Preview.http://www.w3.org/TR/css3-selectors/#negation
Nesse ínterim, você terá que seguir os métodos antiquados.
fonte
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%.
fonte
Interessante apenas tentei isso para selecionar o elemento DOM usando JQuery e funcionou! :)
Esta página tem 168 divs que não possuem a classe 'comment-copy'
fonte
[attr!="value"]
é um seletor somente jQuery api.jquery.com/attribute-not-equal-selectorem 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 '
e
fonte