Is there any way to override inline CSS without using !important and without using JavaScript?
For example:
<div style="background-color: red;"></div>
I was wondering if it can be overridden without:
div {
background-color: blue !important;
}
No, inline style takes precedence, you can override it only with !important.
I'm afraid the !important clause is specifically created as the solution for this. It would be impractical for CSS to implement different degrees of priority, apart from the now-used
style block < inline < !important
priority.
Try this:
div[style] {
background: blue !important;
}
Related
I have included first Materialize's CSS and then I have linked my css file.
In which I have an example class that sets background-color property to red, but that doesn't override the default color (that's set by materialize-css).
Here's an example:
https://jsfiddle.net/79ss2eyr/1/
I'd like not to change anything in materialize's source files, instead I want to add additional classes and set my additional colors.
Here's what the inspector says:
How should I do that and why my css properties do not override materialize's since it's linked after the framework?
Inn Materialize's the rule is set by footer.page-footer {}, but you're wrote just .app-bg. So you can't override the Materialize's rule.
If u want to override that class you can use footer.app-bg or use !important:
footer.app-bg {
background-color: red;
}
or
.app-bg {
background-color: red !important;
}
Make the css selector more specific, like this:
footer.app-bg {
background-color: red;
}
If your css is not applying to the element because of other applied css just use !important to specify that your css is important.
.app-bg {
background-color: red !important;
}
Example : https://jsfiddle.net/79ss2eyr/2/
I am trying to apply a hover effect on a div. Why isn't this working at all?
My Html looks like this:
<a href="#panel-866" id="panel-866">
<div class="application-icon" style="background-image: url('/custom-icon-off.png')">
</div>
</a>
CSS
.tab-title > #panel-866 .application-icon:hover {
background-image:url(/custom-icon-hover.png);
}
You need to override the inline styles, which have higher specificity than external / embedded styles.
Try this:
#panel-866 > .application-icon:hover {
background-image:url('/custom-icon-hover.png') !important;
}
Here's a demo: https://jsfiddle.net/0aghvn3u/
The '>' - selector gets direct descendants, maybe just remove
.tab-title >
and it will work. Difficult to say without knowing your markup since its a simple task and your solution seems to be correct.
Make it important so it overrides the anchor tag's default hover styles.
.tab-title > #panel-866 .application-icon:hover {
background-image:url('/custom-icon-hover.png') !important;
}
There are a few problems with your code, so it's hard to say what specifically is causing the problem. You have a div element in an a tag, which you should avoid because block level elements don't work well within inline elements. This is likely not the problem, though.
I've added some markup and removed some CSS that included a selector not in the code you presented here that might have caused the effect not to work:
<a href="#panel-866" id="panel-866">
<span class="application-icon" style="background-image: url('http://lorempixel.com/400/400')">
</span>
</a>
and
#panel-866 .application-icon {
height: 400px;
width: 400px;
display: block;
}
#panel-866 .application-icon:hover {
background-image: url(http://lorempixel.com/200/400) !important;
}
Notice I made the inline span element display:block (this is technically "allowed") so I could give it a width and height. Even when on a div element, background images need a width and height to display.
Secondly, as the other posters mentioned, adding an !important declaration to your :hover style rule is needed because browsers will always override internal or external style rules with inline ones.
https://jsfiddle.net/3b2ywp5b/
How can I override an inline CSS rule with using an external stylesheet file?
This is my HTML code:
<div class="mydiv" style="background:#000"> lorem ipsom</div>
I want to change the background color using CSS. This is my CSS code:
.mydiv {background:#f00; color: #000;}
But this is not working, but I this is possible.
Is there a way to change the background color in Internet Explorer?
This is very simple. Use !important after your rule style. Here is the example:
.mydiv {background:#f00 !important; color: #000;}
URL: http://jsfiddle.net/msJxL/
And for Internet Explorer, check out How To Create an IE-Only Stylesheet | CSS-Tricks.
Inline style is treated as having a higher specificity than any rule-set.
The only ways to override it are to change it on the element or use an !important rule.
!important rules are a sledgehammer of a solution and only work once (if you want to override again, you are stuck; there is no such thing as a double !important rule), so changing the style attribute value (preferably removing it entirely in favour of a stylesheet) is the best option.
If you really want to use !important then the syntax is:
.mydiv {
background:#f00 !important;
color: #000;
}
Use the !important for this. It will override other CSS. Try the following code:
.mydiv {background:#f00 !important; color: #000;}
Use this:
.mydiv {
background: #f00 !important;
/* This will increase the rule score */
color: #000;
}
Detailed information: Stack Overflow question How can I override inline styles with external CSS?.
You can use the CSS attribute selector:
<style>
div[style] {
background: blue !important;
}
</style>
<div style="background: red;">
The inline styles.
</div>
This question already has answers here:
How to override !important?
(12 answers)
Closed 2 years ago.
What I am trying is setting this CSS on element:
background: red !important;
But when I try to do this:
background: yellow;
it still only shows the red and not the yellow for that one field as I would like it to be (I am not using external CSS).
What I am asking is how to override it, is it possible?
Ans is YES !important can be overridden but you can not override !important by a normal declaration. It has to be higher specificity than all other declarations.
However it can be overridden with a higher specificity !important declaration.
This code snippet in Firefox's parser will explain how it works:
if (HasImportantBit(aPropID)) {
// When parsing a declaration block, an !important declaration
// is not overwritten by an ordinary declaration of the same
// property later in the block. However, CSSOM manipulations
// come through here too, and in that case we do want to
// overwrite the property.
if (!aOverrideImportant) {
aFromBlock.ClearLonghandProperty(aPropID);
return PR_FALSE;
}
changed = PR_TRUE;
ClearImportantBit(aPropID);
}
Good read
Specifics on CSS Specificity
CSS Specificity: Things You Should Know
Here's an example to show how to override CSS
HTML
<div id="hola" class="hola"></div>
CSS
div { height: 100px; width: 100px; }
div { background-color: green !important; }
.hola{ background-color:red !important; }
#hola{ background-color:pink !important;}
and output will be
Also we can not override inline !important
HTML
<div id="demo" class="demo" style="background-color:yellow !important;"></div>
CSS
div { height: 100px; width: 100px; }
div { background-color: green !important; }
.demo{ background-color:red !important; }
#demo{ background-color:pink !important;}
the output is
As described in w3 spec, !important declarations do not alter the specificity, but rather take precedence over "normal" declarations. Effectively, such declarations only "compete" between themselves - thus, you can override yours with another !important declaration of higher specificity:
/*
these below are all higher-specificity selectors and, if both
rules are applicable to the same element, background colour
will be set to "yellow":
*/
.some-class.some-other-class, div.some-class, #some-id {background: yellow !important;}
.some-class {background: red !important;}
There is also the declaration order to consider - a declaration further down in the CSS will take precedence over an earlier one if their selectors have the same specificity.
A case worth noting is when it clashes with an inline declaration. Counterintuitively (but fully in line with the spec), the !important value will come out on top! This means that if you have
<style>
#secret-container {display:none !important;}
</style>
<script>
$('#secret-container').show();//using jQuery etc.
</script>
<div id="secret-container">...</div>
the div in question will remain hidden! The only way to have an inline rule take precedence over an !important one is, well, by applying !important to it as well. I'll let you be the judge of how good a practice that is ಠ_ಠ
There's no overriding inline !important though.
!important will override background: yellow; Try to avoid using !important. Take a look at css specificity. http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
I have a div to which i appy a css class.Now in css class heigh is decalred as x px but i want my div to be of y px.How can i overide hight paramater of css without changing css.
<div style="height: 80px"></div>
The browser assigns the styles with the highest specificity to the elements. As you can read here 'style' has the highest specificity.
You can override specificity by using the !important declaration.
There are several ways to override the value of a CSS attribute defined in a class.
This is really a huge topic, though -- so if you really want to understand this stuff, start here with a tutorial on CSS Specificity.
You need to change the CSS to overwrite it - either use the cascade to give it a new value, or add an inline style attribute which has precedence over external styles declarations (watch for !important).
CSS declarations cascade. Meaning you can attach additional rules to other CSS classes and assign both to an element:
<style type="text/css">
.style1 {
color: red;
height: 100px;
}
.style1.style2 {
height: 200px;
}
</style>
<!-- This DIV will have a height of 200px and red foreground color -->
<div class="style1 style2"></div>
use inline css with !important tag
<div class="yourclass" style="height:ypx!important">