I'm trying to get the real style of an inline element but it's always getting the css applied to it. I don't want to modify my CSS, too many pages depend on it.
<body class="processed" style="padding-top: 157px ;margin-top: 0px;">
My CSS
.processed{padding-top: 56px !important;}
JS:
$(function(){
var pad = $('body').css('padding-top');
$('body').attr('style','padding-top:'+ pad +' !important; margin-top: 0px;');
console.log('pad' + pad);
});
The result: body with inline style 56px, instead of 157px...
You could create a second "important" class in the CSS file, so it wouldn't affect those other pages, but it would override that first "important" class.
You just have to write that new class after the first one.
For example:
HTML:
<body class="processed processed-large-top">
CSS:
.processed{padding-top: 56px !important;}
.processed-large-top{padding-top: 157px !important; margin-top: 0px;}
Solved, the problem was an script overriding styles after DOM ready...the !important played a good role..
A CSS rule with !important have higher priority than inline styles. To override it, you have to use !important also on the inline style CSS.
So, your HTML tag have to end up like this:
<body class="processed" style="padding-top: 157px !important;margin-top: 0px;">
Related
So I've already got the text color of a select box set with an !important value and am struggling to change it again using jQuery.
<div class="halio-form-container">
...
<select class="form-control" id="HalioDirection" name="halio_direction">
<option selected="" disabled="">Direction...</option>
<option value="one_way">One Way</option>
<option value="return">Return</option>
</select>
...
</div>
.halio-form-container select {
color: #B0A9A9 !important;
}
Any thoughts?
The best solution is to not use the !important at all and refactor your css (and possibly markup) such that proper selector specificity allows you to do what you need without !important.
That being said, general way to override an !important is to add another CSS rule with !important with either a higher specificity, or same specificity but defined at a later point. This works because in a specificity tie, the last rule defined wins.
Related question: How to override !important
Since we need to use JS/jQuery and not CSS, there are three possible solutions:
1. Add an inline !important rule
We can beat !important with a more-specific rule by adding an inline !important rule.
The reason this works is because inline styles always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
var currentStyle = $('#test').attr('style') || '';
$('#test').attr('style', currentStyle + ' color:red !important');
#test {
color: blue !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test">
This text is RED, not BLUE
</div>
2. Add a new style element
We can beat !important with a later-defined-equally-specific !important rule by creating another stylesheet containing this rule and appending it to <head>.
$('<style>#test { color:red !important; }</style>').appendTo('head');
#test {
color: blue !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test">
This text is RED, not BLUE
</div>
3. Append to last style element
Basically another version of 2. where, instead of creating a new style, we append our new rule to the end of the last style:
var lastStyle = $('style').last();
lastStyle.html(lastStyle.html() + '\n#test { color:red !important; }');
#test {
color: blue !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test">
This text is RED, not BLUE
</div>
Additional resources:
MDN
I have taken a 'div' element and at run time the 'div' shows some auto generated inline style. How i should stop such inline style?
<div class="Radius_Div_Square" id="UserNoteExpand"
style="overflow-x: auto; overflow-y: auto; height:4px;" sizcache="3" sizset="339;">
In code sample you can see height:4px; that i have to stop.
That inline styling must be added by some other library or framework.
You must find out what is causing that.
Or you can overwrite the height attribute with another (external) stylesheet like
#UserNoteExpand {
height: 100px !important;
}
However, the latter is quite dirty...
I have a reference to a server side JS file that dynamically creates divs on my page. I am trying to override the css that is inline for the divs that are created but I have not been able to do so.
I have tried !important and the style that is created by the JS still trumps everything I do.
When i look at the style in the developer console of chrome it shows element.style as being the style that "won" over my style
I do not have access to edit the JS file on the server.
I place this in my page and it dynamically creates the divs and styles them.
<head>
<style>
#id
{
background-color: blue; !important;
display:block; !important;
}
.class
{
background-color: blue; !important;
}
</style>
</head>
<script src="http://xxx/xxx/xxxxx/xxxx.ashx?blank=xxxx" type="text/javascript" charset="utf-8"></script>
You can create your own javascript to restyle the divs created by the server javascript.
The CSS !important tag does sound like your answer here but sometimes you need to ensure your CSS declaration is specific enough to the element, i.e.:
<div>
<a style="color:#F00;">A Link</a>
</div>
If I apply the below CSS the inline style or #F00 will still win:
div {color:#fff !important;}
But if I am specific with my CSS declaration i.e:
div a {color:#000 !important;} <--Notice the 'a' tag
Then my link will be #000. This does not matter if the link was loaded in with JavaScript or not.
See my JSFiddle Example: http://jsfiddle.net/zqpy0r6c/
More technical info can be found at
When does CSS's !important declaration not work?
The CSS given in the style attribute on an element always wins over the stylesheets. The best option to override this CSS is to edit the style attribute using some JS:
<script>
function clearInlineStyling(element){
element.style= null;
}
</script>
Next you have to watch the html for your script to add new elements, find them and remove their styling. I would suggest JQuery for this.
Is there any way to stop the conflict between same class or id of multiple css files. As I am explaining below for better understanding:
There is a master web page which has several <div> but there is a <div class"dynamic"> which always reload the contents including css files. Let's suppose if any class of master page has the same name to reloaded elements' class while properties are different. Then how should I handle this to stop the conflict.
master.html
<html>
<head> //attached master.css file here </head>
<body>
<div class="myClass"> </div>
<div class="dynamic"> /* often reload elements by ajax */ </div>
</body>
</html>
master.css
.myClass { height: 100px; width: 150px; background : red;}
.dynamic { height: 200p; width: 200px; }
now i am showing the reloaded html elements & css files into dynamic div of master page
reloaded tag line by ajax : <div class"myClass"> </div>
reload.css
.myClass{height: 30px; width: 25px; background: yellow; }
Now as you can see there are two classes with same name but different properties. Then how should I stop the confliction?
#Edit Thanks everyone for your support & time but my problem is different here.
the dynamic reloaded contents & css files are streaming from the client/user machine while master html page & it's css streaing directly from server.
so whatever the contents loads in dynamic div, it's coming from client side (e.g. tag lines & css, js). in that case i am not able to handle the css file which is just reloaded by ajax() so i think it can be sort out using js/jQuery fn().
You could apply the cascading rules of the CSS:
In your case, div.myClass inside div.dynamic should override div.myClass belongs to the body.
you adjust the reload.css rules to
.dynamic .myClass{height: 30px; width: 25px; background: yellow; }
The cascading rules which are applied when determine which rules should apply to html div could be referenced here
Updated 11.23
As the OP only have control over master.css, the above solution won't work. Thus, I suggest use child selector to limit the CSS rules to only the outer div.myClass. Modify the rule in your master.css to:
body > .myClass {...}
This rule will only apply to the .myClass which is the child of body. It leaves the spaces of styling for inner .myClass div.
Option 1: A more specific selector
.dynamic .myClass { }
This selector selects the .myClass element that is a descendent of .dynamic.
.dynamic > .myClass { }
This selector selects the .myClass element that is a direct child of .dynamic.
Option 2: Inline CSS
<div class="dynamic">
<div class="myClass" style="background-color: yellow;"></div>
</div>
Option 3: Use a different class.
UPDATE
If you want to avoid the previous defined property to be overwritten by a later defined value, you can use the !important syntax.
.myClass { background-color: red !important; } /* Sets the property to red */
.myClass { background-color: yellow; } /* Property is NOT overwritten */
If I understand your question correctly, this should sort it.
So you should add !important to the properties that seem to be overwritten.
div.myclass { ble ble }
div.main div.myclass { ble ble }
<body>
<div class="myclass"></div>
<div class="main><div class="myclass"></div></div>
</body>
Whichever css class of the same name is loaded last will overwrite anything set by the earlier class. However, if you use an inline style attribute this will always take precedence over anything set by the css file (so using an inline style is one option).
You could also use different style names or clarify your style with tag names div.myClass or id's #myDiv.myClass.
I have some JavaScript which is changing an image correctly but once it has been called, my a:hover CSS code no longer works.
Looking with firebug the following JavaScript creates this css rule:
element.style {
background-image:url(/content/images/side_partnershipsOver.png);
}
document.getElementById('partnerships').style.backgroundImage = "url(/content/images/side_partnershipsOver.png)";
How can I apply the JavaScript and not have the a:hover code overriden by the element.style rule?
As far as I know setting the element.style.backgroundImage is essentially the same as using an inline style.
<style type="text/css">
a { background: blue; }
a:hover { background:green; }
</style>
<a href="#" style="background:red;">link<a>
Unfortunately the inline style always wins. In the above sample the link will always be red. As Daniel White said jQuery would be very useful here. Although you may be able to get around this issue in two ways.
One, Generate the style using javascript to write a style tag
document.write("<style type='text/css'>#partnerships { background-image:url(/content/images/side_partnershipsOver.png);}</style>");
or two, Manually setup mouseenter/mouseleave events to handle your hover style
Update
or three, as pointed out by KevinUK, use the !important css tag to override the inline style set.
<style type="text/css">
a { background: blue; }
a:hover { background:green !important; }
</style>
<a href="#" style="background:red;">link<a>
I was also frustrated about this CSS js style gap so I build
methods to apply style from js with a CSS string
elm.jCSS(cssText);elm.jCSSPseudo(cssText,pseudoElt)