11

Vamos supor que tenho algum CSS do tipo:

#foo input {
    background-color: black;
    color: white;
    /* seguem mais um milhão de propriedades */
    text-align: center;
    z-index: 9000;
}

Todo input filho de foo vai ter todas essas propriedades.

Supondo que no meio da página eu queira que um único input não tenha essa formatação... Eu sei que posso dar-lhe uma classe específica ou id específico, com novas regras de formatação. Mas apenas o que eu especificar será sobrescrito. Eu tenho que jogar um valor initial em todas as propriedades já especificadas anteriormente para poder desfazê-las todas.

Existe alguma forma mais curta de se ignorar o CSS por apenas um trecho da página? Eu adoraria algo do tipo:

<!-- aqui acaba o CSS -->
<input blablabla />
<!-- aqui o CSS começa a valer de novo -->

Ou

<input blablabla ignoreCss="True"> <!-- seria tão bom se houvesse algo assim -->

Ou ainda

$("#idDoMeuInput").ignoreCssCompletely();

Procurei por várias alternativas em vários lugares, mas não encontrei. Existe alguma forma de fazer um elemento ignorar o CSS?

2
  • 1
    Ignorar não. Mas por JavaScript é possível remover todos os estilos de um elemento, só não acho muito prático.
    – bfavaretto
    2/05/2014 às 22:33
  • Voce pode usar iframes, e criar completamente outra pagina fora e inserir ela!
    – user92134
    21/09/2017 às 23:06

5 Respostas 5

13

Que tal usar um :not para ignorar uma classe específica? Algo assim:

#foo input:not(.ignoreCss) {
    background: red;
}
<div id=foo>
  <input></input>
  <input></input>
  <input class=ignoreCss></input> <!-- Esse não vai ser vermelho -->
  <input></input>
</div>
5

Não é possível remover/ignorar regras de CSS defenidas fora do elemento (ie na folha de CSS).

Se você tiver <input style="color: red;">, aí sim é possível usar o jQuery $("selector").removeAttr("style"); para remover esse estilo. Mas mesmo aí ele vai remover o local e usar o que esteja defenido no CSS.

Assim a solução é mesmo usar classes ou modificar o style no próprio elemento.

Lembre-se que existe também o !important para ajudar a fazer override, se necessário.

3

No seu caso, você pode definir o CSS diretamente no seu input em vez de usar a regra para todos input.

Opção CSS:

<style type="text/css">
<!--
#formulario .input_css  {
    background-color: black;
    color: white;
    text-align: center;
    z-index: 9000;
}
-->
</style>

<body>
<div id="formulario">
  <input name="" type="text"   class="input_css"/>
  <input name="input sem css" type="text" />
  <input name="input sem css" type="text" />
  <input name="" type="text" class="input_css" />
  <input name="input sem css" type="text" />
  <input name="" type="text" class="input_css"/>
</div>
</body>
3

Se você quiser "ignorar" as heranças do CSS estaria perdendo o sentido de cascata. O que é aconselhável fazer e reescrever o css para seu elemento específico e caso a herança persista você adiciona !important, por exemplo: border: 1px solid #ff0000 !important; Assim ele "força" aquele elemento receber a formatação css.

3

Talvez uma classe no css que devolvesse os presets default para esse elemento ajudasse. Exemplo: Tenho minhas div's todas com bordas "1px solid" e uma delas eu quero sem borda. Meu css fica assim:

div{border: 1px solid;}
.div_sem_css{ border: none; }

E meu html:

<body>
<div> Div 1</div>
<div> Div 2</div>
<div class="div_sem_css">Div 3</div>
<div> Div 4</div>
</body>

A "Div 3" não aplica a borda. A ideia consiste em criar uma classe css que tenha "valores padrão" e aplicá-la ao que não for receber o css. Deu pra entender mais ou menos? rs

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .