Ignore CSS in certain section of the page

Navigation
9

Let's say I have some CSS of the type: 

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

All% with% child of input will have all these properties.

Assuming that in the middle of the page I want a single foo not to have this formatting ... I know I can give you a specific class or specific id with new formatting rules. But only what I specify will be overwritten. I have to play a input value on all properties previously specified before I can undo them all.

Is there any shorter way to skip CSS for just a single page? I would love something like: 

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

Or 

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

Or even 

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

I looked for several alternatives in several places, but I did not find it. Is there any way to make an element ignore CSS?

    
asked by anonymous 02.05.2014 / 23:55

5 answers

11

How about using :not to ignore a specific class? Something like this: 

#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>
    
03.05.2014 / 04:02
4

It is not possible to remove / ignore CSS rules defined outside the element (ie in the CSS sheet).

If you have <input style="color: red;"> , then you can use jQuery $("selector").removeAttr("style"); to remove that style. But even then it will remove the location and use whatever is defined in the CSS.

So the solution is to even use classes or modify style in the element itself.

Remember that there is also !important to help override if necessary.

    
03.05.2014 / 00:05
3

In your case, you can set CSS directly in your input instead of using the rule for all input .

CSS Option: 

<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>
    
03.05.2014 / 00:23
3

If you want to "ignore" CSS inheritances, you would be losing the sense of a waterfall. What it is advisable to do and rewrite css for your specific element and if the inheritance persists you add! Important, for example: border: 1px solid # ff0000! Important; So it "forces" that element to get css formatting.

    
03.05.2014 / 03:46
3

Maybe a class in the css that would return the default presets for this element would help. Example: I have my divs all with "1px solid" borders and one of them I want without border. My css looks like this: 

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

And my html: 

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

"Div 3" does not apply the border. The idea is to create a css class that has "default values" and apply it to what will not receive the css. Could you understand it more or less? rs

    
31.03.2015 / 04:53
How to convert seconds to the "Time: Minute: Second" format? How do I SELECT on 2 or more Tables with 2 or more conditions?