Ignore CSS on a particular page snippet

Asked

Viewed 17,141 times

11

Let’s assume 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 input son of foo will have all these properties.

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

Is there any shorter way to ignore CSS for just a snippet of the 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 else

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

I have looked for several alternatives in several places but could not find them. Is there any way to make an element ignore CSS?

html css
  • 1

    Ignore no. But by Javascript it is possible to remove all styles of an element, I just don’t find it very practical.

  • You can use iframes, and completely create another page outside and insert it!

5 answers

12


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

#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

Cannot remove/ignore closed CSS rules outside the element (ie in CSS sheet).

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

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

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

3

In your case, you can define the CSS directly in your input instead of using the rule for everyone 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>

3

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

3

Perhaps a class in css that returned the default presets for that element would help. Example: I have my div’s all with "1px Solid" borders and one of them I want no edge. 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 edge. The idea is to create a css class that has "default values" and apply it to those who are not receiving css. Did you understand more or less? rs

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.