If you have
<div style="display: none !important;"></div>
Is there a way to override that in the style sheet to make it displayed?
Preferably using something similar to this:
div { display: block !important; }
Let me begin by saying that generally inline styles can be overridden:
.override {color:red !important;}
<p style="color:blue;">I will be blue</p>
<p style="color:blue;" class="override">But I will be red</p>
This behavior is described in W3 specs, where it is stated that !important declarations do not alter the specificity, but rather take precedence over "normal" declarations.
That being said, when conflicting rules both have the !important flag, specificity dictates that an inline rule is applied - meaning that for OP's scenario, there's no way to override an inline !important.
You cannot override inline CSS if it has !important. It has higher precedence than the style in your external CSS file.
However, if you want it to change some actions later on, you can use a bit of JavaScript.
You can not override inline CSS having !important, because it has higher precedence, but, using JavaScript, you can achieve what you want.
You cannot override inline style having !important. First preference is inline style.
For eg: we have a class
.styleT{float:left;padding-left:4px;width:90px;}
and in jsp
<div class="styleT" id="inputT" style="padding-left:0px;">
here doesn't take the padding-left:4px; .It takes class styleT except the padding-left:4px;.
There will be padding-left:0px;.
Here is a simple jQuery solution.
$(document).ready(function() {
$('div').css('display','block');
})
You can see this example! There are several rules for CSS selector. The strongest selector is inline (if same level with/without !important). Next ones: id, class, etc. So if a tag is already stylized by inline css with !important, you just have a way: use Javascript to change.
var pid = document.getElementById('pid');
var button = document.getElementById('button');
button.addEventListener('click', function(){
pid.style.color = '';
});
p{color:violet !important;}
*{color:blue !important;}
html *{color:brown !important;}
html p{color:lighblue !important;}
.pclass{color:yellow !important;}
#pid{color:green !important;}
<p class="pclass" id="pid" style="color:red !important;">
Hello, stylize for me !
</p>
<button id='button'>Change color by JS</button>
As you see, the style by inline css was removed and the id is the strongest selector now !
Precedence rules when two CSS properties apply to the same node:
!important beats not-!important. If equally !important, ...
style attribute beats css in a file. If both are in css files...
an ID in the CSS selector beats no ID. And more IDs beat less. (and you thought there was no reason for two IDs in a selector.) If same ID count...
Classes, or attributes like [name] in the selector, count them; more beats less. If all those are the same...
tag names like span or input, more beats less.
So you see the inline !important is the highest precedence.
Related
The title says most of it. Is there a CSS keyword which overrides !important at one higher level or is there some feature like this planned in any newer CSS spec?
Of course, I know that !important is a bit likely to be used by noobs and that in many cases it is not the best way to go as stylesheets may really suck if badly written. However, sometimes it's useful and even needed.
The strongest style in CSS I can think of is an inline style with !important like this:
<span id="bluebeaver" style="color: red !important;">I am a happy blue beaver</span>
Now let's assume that I cannot edit the HTML and must modify the style from an external stylesheet.
It would be really great to have something like:
#bluebeaver {
color: blue !important 2;
}
If they had levels for it like for instance with z-index.
Is there any solution to this or anything planned with newer CSS specifications?
So far I did not find anything.
Can you show a CSS solution to override an !important inline style or is there definitely no possibility?
Simply remove the style attribute from the element using JavaScript:
document.getElementById("bluebeaver").removeAttribute('style');
Then use your external stylesheet to apply whatever CSS you want.
Two reasons why creating higher levels of !important is not a good idea:
It sets a bad precedent.
Adding !important2 would be caving in to poor-coding habits on a global scale. It would be the W3C sending a signal that anything goes.
You've also opened the door to !important3, !important4, etc. Where does it end?
Lowering standards and expectations is not a good way for the industry to make progress.
It may not even solve your problem.
Consider this: The person who set that inline style to color: red !important, obviously wanted that rule to have the highest priority.
If your idea became real, and there were higher levels of !important, let's say going up to !important10, guess what that person would have used? And you'd still have the same problem, but you'd be here asking if there were any plans for !important11.
No, there is no keyword or other way to make a declaration more important than !important. There is no known activity to change this.
In general, it is possible to override a declaration that has !important by using a rule that also has it and that has higher specificity. However, a declaration in a style attribute has, by definition, higher specificity than any other author declaration. The only way to defeat it is in CSS is to use a user style sheet with !important.
There are non-CSS solutions, but they are rather obvious, such as using JavaScript to simply remove or modify the style attribute.
The highest order I know of is targeting elements that have inline styles applied. You can actually select the element's style data attribute in the CSS selector to override its style! Check this out:
.blue[style]{
color:blue !important;
}
<div class="blue" style="color:red;">SO VERY IMPORTANT</div>
Of course you can even get more specific by targeting the style specifically, such as .blue[style="color:red;"].
You can modify the colour of HTML element using javascript.
document.getElementById('bluebeaver').style.color=blue;
Demo : https://jsfiddle.net/041fhz07/
Try Specificity: If two selectors apply to the same element, the one with higher specificity wins.
Try to style your element the more specific you can. Maybe use:
#bluebeaver span {}
Take a look to this link: CSS Specificity: Things You Should Know
if you want to use CSS only you just declare the new style with !important, the last "important" wins. though I'd avoid using it in the first place unless completely necessary.
it should only be used for styles that are essential for your page/app to work, not things that are expected to change.
another solution is to use JS to remove and/or add classes/id to change the style of the element when you don't want to change the CSS itself.
div.prop1.imp1.imp2 {
background-color: red !important;
}
div.prop1 {
background-color: black;
}
div.prop1.imp1 {
background-color: white !important;
}
If you can't do this since not all elements have the .imp1 class on the list in JavaScript, and you are adding say a highlight on something with a button click (.imp2) . You can specify the 'more important' .imp2 class above the others with !important on it.
This makes the property with the additional imp2 class more important than the .prop1.imp1 style because it is loaded first in the css.
I'd like to force all text on one of my systems to be displayed with one font type. However, folks frequently paste in text that has inline styles with all sorts of different formatting.
Could I override an element's inline style in my stylesheet? '!important' isn't enough for this!
You can override inline styles using CSS code that assigns font family to all relevant elements using the !important specifier, e.g.
* { font-family: Calibri !important; }
It is not sufficient to set the font e.g. just on the body element, since then inner elements have their fonts controlled by rules applicable to them. Inner elements inherit font from their parent only if no CSS rule sets the font on the inner element.
If someone is able to inject an inline style that has !important, then you cannot beat that in CSS. You would need to manipulate the document with JavaScript, removing or changing the style attribute.
Inline styles rule supreme.
You can do this, but you'll need to do it using JavaScript. The code would have to basically remove all of the inline style statements from the pasted code. This is a good idea anyway, you never know what people will paste-in.
Using jQuery:
$('.wrapper *').removeAttr('style');
...where your content is within a div with a class of "wrapper"
You do not need JavaScript for this. Despite what you say, !important is indeed enough.
Test case: http://jsfiddle.net/jezen/Z4rnv/
Explanation: CSS rules are chosen based on a level of specifity, which is calculated by the layout engine. The !important rule isn't an all-overbearing modifier; it simply adds extra weight to the respective rule in the specificity heirarchy.
Using the jQuery remove attribute function should do the trick.
removeAttr( 'style' );
I wasn't happy with the non specific nature of the other two answers.
* { font-family: Calibri !important; }
Won't always work sometimes you need to be more specific such as when dealing with spans
span { font-family: Calibri !important; }
Is specific enough because though you are adding important to the value.
Also the type of font styling matters, if the initial font styling was just using a font such as font-family and font-size are more specific already so using
span { font:15px arial,sans-serif; !important; }
would not override an inline style of
<span style="font-family: Calibri">Hello World</span>
This question already has answers here:
How to override !important?
(12 answers)
Closed 9 years ago.
I wrote a bit of html with some css styling injected into a third party site. But, their styling is messing with mine due to some !important declarations. I don't want this, and I don't want to use !important in my styles.
What can I do to prevent this?
Example at jsFiddle
The !important declaration overrides everything else, even inline styles and more specific hierarchy. The only way to override an !important is with an even more specific !important.
And this is why !important should be avoided.
You can overwrite !important contrary to what most people believe. You can even use this technique to overwrite inline styles applied by JS or 3rd party plugins (ex. Facebook!!) The most powerful way is like so:
td[style] {height: 110px !important;}
It acts as if you injected the style inline to the html because you are applying the styles to the actual style attribute of the tag. The combo of being inline and !important should trump everything, except for a style that is applied later and also inline and !important
Here's a fiddle with the working code: http://jsfiddle.net/9LvzP/
You can see that even though background-color: green !important comes before background-color: blue blue is more powerful and gets applied
Define the class with proper hierarchy that will work for you.
.list .row span{
color:red !important;
}
<div class="list">
<div class="row">
<span>Your text </span>
</div>
Try to do something similar to what I have created here.
So I'm working on a project that accepts HTMLs as inputs and returns them as outputs. All of the HTMLs I get as inputs have all of their text in divs and style sheets that dictate the style for each div based on the class attribute.
To better visualize things, and to see how my project is coming along, I would love to output the input HTMLs color coded to specifications I give them. It's really easy for me to modify the body of the HTML, but difficult to deal with the style sheet. All I'm looking for is something simple to override the color property of the style sheet. It can be hacky, as this is just internal code for temporary use. I just want something simple that works. Is there an easy way to override aspects of CSS classes in the body of a file?
[EDIT] I want to provide an example to better explain what I'm looking for. An example of the style sheets I have at the top of my page (that I want to override) is:
.style21{vertical-align:top;font-size:13px;font-family:Helvetica;color:#000000;}
An example of a div whose color I'd like to change is:
<div style="position:absolute;top:432;left:422;color:#ff0000;"><span class="style21">relating to</span></div>
My problem is that I can't override the color specified in the css. As you can see in the above example, I'm trying to do it in the specific style within the div, but that isn't working. [/EDIT]
Either use the style attribute to add CSS inline on your divs, e.g.:
<div style="color:red"> ... </div>
... or create your own style sheet and reference it after the existing stylesheet then your style sheet should take precedence.
... or add a <style> element in the <head> of your HTML with the CSS you need, this will take precedence over an external style sheet.
You can also add !important after your style values to override other styles on the same element.
Update
Use one of my suggestions above and target the span of class style21, rather than the containing div. The style you are applying on the containing div will not be inherited by the span as it's color is set in the style sheet.
Id's are prior to classnames.
Tag attribue 'style=' is prior to CSS selectors.
!important word is prior to first two rules.
More specific CSS selectors are prior to less specific.
More specific will be applied.
for example:
.divclass .spanclass is more specific than .spanclass
.divclass.divclass is more specific than .divclass
#divId .spanclass has ID that's why it is more specific than .divClass .spanClass
<div id="someDiv" style="color:red;"> has attribute and beats #someDiv{color:blue}
style: #someDiv{color:blue!important} will be applied over attribute style="color:red"
you can test a color by writing the CSS inline like <div style="color:red";>...</div>
You can put CSS in the head of the HTML file, and it will take precedent over a class in an included style sheet.
<style>
.thing{
color: #f00;
}
</style>
Have you tried using the !important flag on the style? !important allows you to decide which style will win out. Also note !important will override inline styles as well.
#example p {
color: blue !important;
}
...
#example p {
color: red;
}
Another couple suggestions:
Add a span inside of the current. The inner most will win out. Although this could get pretty ugly.
<span class="style21">
<span style="position:absolute;top:432px;left:422px; color:Red" >relating to</span>
</span>
jQuery is also an option. The jQuery library will inject the style attribute in the targeted element.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function() {
$("span").css("color", "#ff0000");
});
</script>
Hope this helps. CSS can be pretty frustrating at times.
if you can access the head add
<style>
/*...some style */
</style>
the way Hussein showed you
and the ultra hacky
<style>
</style>
in the html it will work but its ugly.
or javascript it the best way if you can use it in you case
Eli,
it is important to remember that in css specificity goes a long way. If your inline css is using the !important and isn't overriding the imported stylesheet rules then closely observe the code using a tool such as 'firebug' for firefox. It will show you the css being applied to your element. If there is a syntax error firebug will show you in the warning panel that it has thrown out the declaration.
Also remember that in general an id is more specific than a class is more specific than an element.
Hope that helps.
-Rick
Is it possible, for example, to have a div that completely ignores CSS rules, no matter what classes and ids it contains?
Nope, this is (sadly) not possible without an iframe.
You would have to reset every existing CSS rule for that div like so:
div.sandbox
{
font-size: ....
font-family: ..........
margin: .........
padding: .........
line-height: .........
}
while difficult and never 100% reliable, it might be possible to achieve a usable result this way. You could look at one of the "reset stylesheets" like Eric Meyer's to get a list of important properties to reset; here is what claims to be a complete list of CSS 2.1 properties - excluding CSS 3 and vendor specific ones, which you would have to take into consideration as well.
Providers of 3rd party widgets often hard-code their "reset CSS" as inline CSS inside the HTML element to override any !important rules that threaten to override the sandbox class's rules.
May give results:
div {
all:unset !important;
clear:both !important;
margin: 0 !important
}
Inline style will overide any css styles.
This also mean that any styles set by javascript will overide any css rules, just because javascript is setting styles on a inline manner.
As well any styles between style tag directly on the html part will overide the styles set on the css file.
On any case inlines style are ruling any others hierarchicly.