I have a div with classes of A B C
I added a style to c to show the color as "Red";
The problem is it's overridden from the styles of A and B.
I read that !important only prevents the css being overridden by the inline style but does not prevent the override by other css.
How do I mark the style of C as the strongest?
Increase the specificity of rule C above that of rules A and B. Normally I would include some explanation here, but the one over at the linked site is superb.
An !important declaration provides a way for a stylesheet author to give a CSS value more weight than it naturally has. It should be noted here that the phrase “!important declaration” is a reference to an entire CSS declaration, including property and value, with !important added.
Here is a simple code example that clearly illustrates how !important affects the natural way that styles are applied:
#example {
font-size: 14px !important;
}
#container #example {
font-size: 10px;
}
In the above code sample, the element with the id of “example” will have text sized at 14px, due to the addition of !important.
div.a, div.b {
background-color: #00f;
}
div.c {
background-color: #f00 !important;
}
The !important will up priority of rule and inheritance will be ignored.
div.a, div.b, div.c {
background-color: #00f;
}
div.c {
background-color: #f00;
}
should work, CSS is sequential. This means the last style for that element is applied of no more specific style is available. More specific would be for example
body div.c {
background-color: #f00;
}
!important should work just fine, but if not you can chain your classes in your declaration like so:
div.a.c,div.b.c,div.a.b.c
{
color:red
}
Related
I can't figure out why this won't work. I happen to be using bootstrap as well.
<h1 class="montserrat_text" id="header_title">title</h1>
In the css file .montserrat_text works and the font of the h1 is the correct font.
But when I add #header_title to the css:
#header_title
{
color: red;
font-size: 60px;
}
Nothing happens and the text won't change size or color.
Thanks
The reasons the font color doesn't change was mentioned by #MohammadUsman already - there is no CSS property called font-color, what you want is named color.
The reasons the font-size doesn't change either (even though the property name is correct) could be that your browser ignores rules that follow illegal rules.
For change the color of text you must use color instead of font-color.
According to CSS priority if a selector contain the parents name , this selector has priority for effect than selector that does not contain it.
You must use parent name in selector like :
{# or .}parent #header_title
{
color: red;
font-size: 60px !important;
}
or you can use !important :
#header_title
{
color: red;
font-size: 60px !important;
}
As #Mohammed Usman said, it's color, not font-color.
Also, since you're using Bootstrap, it's possible something is overriding your CSS so you can add the !important tag to ensure that your CSS is used, as so:
#header_title {
color: red !important;
font-size: 60px !important;
}
I am giving !important to all of the css propertis' values like this
.someclass{
color: #f00 !important;
background-color: #ff0 !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
display: block !important;
}
Is there any method to apply only once !important that all values get !important of .someclass?
Edit
suppose main div is controlled with some scripts and then how could I give !important to all at once.
No, but there is a better way. Make the selector more specific than the selector that you want to override. You can for example specify the element name in the selector to make it more specific:
div.someclass {
color: #f00;
background-color: #ff0;
margin: 0;
padding: 0;
width: 100%;
display: block;
}
Not only is it simpler, it's also possible to further override this with an even more specific selector. Adding !important only works in one level.
The specificity of a selector is basically calculated by the number of identifiers, the number of class names and the number of element names that it contains, in that order. For example a selector like div.item .cost with two class names and one element name is more specific than a selector like div span.count with one class name and two element names.
There is no way to do it. Write better selectors instead.
SHORT ANSWER: NO there is not (as far as i know);
LONG ANSWER:
the css has a very nice but sometimes annoying hierarchy system
first of all adding !important is not an adviced move it can do some harms to your page speed and may be some hard times in your next editting to find what cause something not work as it intended.
you can make something stronger priority by determining it with its ID or by making it a decendant like this:
.somediv > li > a {
color: #000;
background: #fff;
}
and it will over ride this:
a.something {
color: #fff;
background: #ff0;
}
and this will over ride both:
a#something {
color: #f00;
background: #0f0;
}
and these will override all but the second is stronger by the way:
a.something {
color: #0f0!important;
background: #00f!important;
}
a#something {
color: #0f0!important;
background: #00f!important;
}
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/
In HTML, When more than one style rule applies to an element, what is the order of precedence?
Rules that apply to an element identified by an id
Rules that apply to all elements of a particular class
Rules that apply to one or more specified tags
I think is id>class>tags, am I right?
Explanation
There are multiple things in play (as usual…), but the important order for you is this:
styles with highest specificity are used
if more have the same specificty, the latest is used
Order of selectors [and/or usage of css, for completness] (and what they add to specificity value is):
tag
class
id
inline styles (via style="")
!important
tag + !important
class + !important
id + !important
inline styles + !important
There were tests which showed that 256 classes on one element/selector have higher specificity then id. But in real life, you'll mostly (if you ever do CSS 'right') deal with number of classes + position in css file (you shouldn't style with #id, as it gives you no advantage over classes, and tags are mostly used only for generic styles)
Read more about specificity here: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Example
HTML:
<div id="johnny" class="walker whisky"> -- </div>
CSS:
/* example one */
div { border-color: red; } // border is red
.whisky { border-color: brown; } // now it's brown
#johnny { border-color: black; } // now it's black
div#johnny { border-color: red; } // it's red again
.walker { border-color: green !important; } // it's green
/* example two */
.whisky {border-color: brown; }
.whisky.walker {border-color: green; }
/* green */
/* example two */
.whisky.walker {border-color: brown; }
.whisky {border-color: green !important; }
/* green */
Hope this helps.
I think is id>class>tags, am I right?
Yes, you are.
This is called specificity; refer to this and this for details.
For playing around with style formatting rules, I'd advise using e.g.: Chrome, as it's Web Developer Plugin gives you insight on how rules are actually applied to a specific node...
Merged with When to use the !important property in CSS [duplicate].
#div p {
color: red !important;
}
...
#div p {
color: blue;
}
I understand how !important works, in this case the div will render red because now it has priority (!important). But I can't still figure out an appropriate situation to use it. Does anybody know any example where !important saves the day?