In a stylesheet, I have this:
body {
color: white !important;
}
Notice how it doesn't work on the text on the right side of this page:
https://www.graf.ly/graph_templates/56/
You can inspect the text, and see that the style was applied, but then overridden. How is this possible?
I thought !important ignores CSS specificity, and acts as a directive to always use that style. I've never seen this behavior before.
Note:
Don't be fooled by the white text by the graph's axis, that is a text svg element and was colored with fill: white !important.
Also, I'm well aware of the correct usage of !important. So please no comments or answers saying "you should never use !important". That is not the question :)
This has nothing to do with CSS specificity or !important. You have a rule in main.css that says:
#legend .label {
color: black;
}
The selector is targeting the .label elements directly and giving them a color, which prevents them from inheriting the color from the body or some other ancestor. An !important property applies only to the element that is targeted; it does not force other elements to inherit that property. In other words, a specified rule always takes precedence over an inherited rule, even if that inherited rule is !important.
See the spec:
User agents must first assign a specified value to each property based on the following mechanisms (in order of precedence):
If the cascade results in a value, use it.
Otherwise, if the property is inherited and the element is not the root of the document tree, use the computed value of the parent element.
Otherwise use the property's initial value. The initial value of each property is indicated in the property's definition.
— http://www.w3.org/TR/CSS21/cascade.html#specified-value
You have a more specific rule that is taking precedence on line 94 in main.css:
#legend .label {
color: black;
}
Change that to white and you are good to go.
Regarding the important, it will take precedence over other references to body, but not to #legend label which is a more specific and applicable selector. Here is a decent article on specificity in CSS: http://css-tricks.com/specifics-on-css-specificity/
Related
I have the following scenario:
Printscreen of my problem
I have a CSS in the project (which I can't change) defining the following:
body * {
font-family: 'x'
}
And this CSS is influencing my shadow DOM, because of that, I can't use the font-family property without using !important. Only with !Important works:
::slotted(span), ::slotted(p){
font-family: arial !important;
}
Does anyone know what to do in this case?
Most of the information needed to answer this can be found in this related answer. In summary: A document-wide style without !important will always override a shadow dom style without !important, if they apply to the same element.
(And in this case, they do apply to the same element: slotted elements exist outside the shadow dom, so * rules in the document stylesheet can find them.)
You've already found two workarounds to this. I'll list them here for completeness:
Use !important:
This is ugly, but it does work. Not only does !important override any and all non-!important rules, but it also overrides any !important rules coming from the document-wide stylesheet!
Reduce the body * rule to just body:
This way, the rule won't apply directly to every element - it will only apply directly to body, and affect every other element via inheritance. Inherited rules can be overridden by anything, since they're only a fallback in case nothing else applies.
In my CSS, I have this:
b {
color: Red;
}
And in my body:
<b>Hello world!</b>
As a result, I get "Hello world!" text that is red in color.
However, as I add more classes:
.myClass {
color: Blue;
}
.green {
color: Green;
}
And I modify my body:
<b>H<a class="myClass">ell</a><a class="green">o</a> wo<a style="color: Black;">rl</a>d
I will not get the same result as earlier.
Is there a way to strictly set a CSS style? Which means that with the above code I wish to get "Hello world!" text that is red.
Thanks
This is a question of CSS Specificicty
The concept: Specificity is the means by which a browser decides which
property values are the most relevant to an element and gets to be
applied. Specificity is only based on the matching rules which are
composed of selectors of different sorts.
Inline styles override external CSS, and class selectors override element level selectors.
The following list of selectors is by increasing specificity:
Universal selectors
Type selectors <--- your b CSS
Class selectors <---- your .xyz CSS
Attributes selectors
Pseudo-classes
ID selectors
Inline style <--- your style=''
If you wish to override specificity, you can use !important after the rule in question, e.g.:
b {
color: Red !important;
}
However, this is not recommended, instead you should write 'better' rules (more specific) to target your HTML as appropriate. This ensures you end up with better structured code, the issue with !important being it can lead to unforeseen circumstances where rules aren't working because you may have forgot you had previously overridden them.
Again, from MDN:
The !important exception
When an !important rule is used on a style declaration, this
declaration overrides any other declaration made in the CSS, wherever
it is in the declaration list. Although, !important has nothing to do
with specificity. Using !important is bad practice because it makes
debugging hard since you break the natural cascading in your
stylesheets.
Some rules of thumb
Never use !important on site-wide css. Only use !important on
page-specific css that overrides site-wide or foreign css (from ExtJs
or YUI for example). Never use !important when you're writing a
plugin/mashup. Always look for a way to use specificity before even
considering !important
With the markup that you provided, no. Otherwise, maybe
The inline style has priority over the stylesheet so part of the text will be black no matter what. You might be able to create a rule that has enough specificity that it will take precendence over any other rules.
b, b .myClass, b .green {
color: red;
}
Though this can get troublesome to maintain. And there is still a chance that a different css rule will get higher precedence later on. I am not completely sure that even specifying all the children with * will do it.
You seem to be asking whether you can set a property (color in the example) on an element in a manner that will not be overridden by settings on inner elements.
You cannot do that with settings on the element itself. But you can set a property on an element and all of its descendants:
b, b * {
color: Red !important;
}
This will override any normal settings for color on inner elements. But it is ineffective against, say, .green { color: Green !important; }. To defeat that, you would need a more specific selector, such as b .green, for your rule—so there is no general way to achieve that (i.e., a way that is independent of the specific markup used inside the element).
For example, if we need to set a div's font-size to 22px, is there a possible way to let the descendants of this div still inherit from the font-size from body? (or any inheritable style, thanks to #Sourabh for pointing out background is not inherited).
I think a key point is that so that we can change the style of body or some parent and let it pass through, even though there is an intermediate change of style. So preferably, we won't do it by:
body, #foo * { font-size: 16px }
#foo { font-size: 22px }
This is related to the case as described in How to solve flicker on iPad when event delegation is used? , where the -webkit-tap-highlight-color need to be set for a div, but the descendants of this div will be best to inherit what is above this div (the parent of this div).
I can use JavaScript to put the style of this div in a temporary variable, and then change the div's style, and then change the style for just the immediately children of this div to the value of that temporary variable, but then whatever that is set for the style of body won't get inherited by those children or their descendants.
No. In the DOM, a descendant element will inherit any inheritable CSS of the parent(s). You can 'reset' it back to match the parent item by declaring it again, but you can't do exactly what you are asking which is only changing the BODY style declaration.
Off the top of my head, the one solution I can think of would be not rely on pure inheritance from the body element but instead create a class and use it on all elements where you want to control aspects from one declaration. That still may be tricky due to CSS specificity, though.
If I'm understanding your question correctly, you could use a > combinator like so:
Working Example
body, #foo { background: yellow }
#foo>* { background: blue }
or like so:
Working Example2
body {
background: yellow;
}
#foo {
background: blue;
}
#foo>* {
background: yellow;
}
W3C background-color Stats
Initial: transparent
Inherited: no
All elements are transparent regardless of their parent's background-color. But that color is transparent so parent's color is visible on the child. So basically, if you want them to inherit color, you can't (not with CSS at least) (there might be a trick that I am not aware of). You have to specify the color for every element if you don't want it to be transparent.
The answer is not quite.
You can reset a property to its initial values by using the initial css keyword, which is particularly useful for these user-agent set styles (like -webkit-tap-highlight-color)
See this jsFiddle.
Note however that this isn't the value that would be set by default if the parent didn't exist, but literally the browser's default setting. In particular, body level formatting is not taken into account.
I've also included the default keyword, which is effectively the same as not including any font-size specifier at all - it goes up the cascade chain to find one that has a font-size specified, in this case on the element-name selector.
Can anybody explain what in reality do !important in css styles?
I when i lok on other site css sometimes they use it, but why? I'm not realy understending the !important "job" :D
Thank You...
The !important rule is a way to make your CSS cascade but also have the rules you
feel are most crucial always be applied. A rule that has the !important property
will always be applied no matter where that rule appears in the CSS document.
So if you wanted to make sure that a property always applied, you would add the !important property
to the tag.
So, to make the paragraph text always red, in the above example, you would write:
p { color: #ff0000 !important; }
p { color: #000000; }
Using !important in your CSS usually means you're narcissistic & selfish or lazy. Respect the devs to come...
More about this
More about this link 2
!important is a part of CSS1.
What is it?
!important overrides other styles that don't have it. Here is a basic order of priority for CSS:
Rules with !important
More specific rules
.classNameA .classNameB {} /* more specific */
.classNameB {}
The order of the rules
.classNameB {}
.classNameB {} /* takes priority */
Example
.classNameB .classNameA {
background-color: red;
}
.classNameA {
background-color: blue !important;
}
Despite .classNameA being more specific in the first rule, the background-color of .classNameA is blue because of !important.
Should you use it?
No, avoid it at all costs. Only ever use it if it's absolutely necessary and if you find yourself in a situation where it is, consider refactoring your CSS. The reason for this is because it's difficult to change your CSS when you have !important rules all over the place. It's also an indicator of bad CSS design.
Further reading
Smashing magazine - !important CSS Declarations: How and When to Use Them
CSS Tricks - When Using !important is The Right Choice
!important sets the priority on the css atributes. If you have two same CSS properties with some different values, one !important mark will set that priority as HIGH.
Normally, latter CSS declarations overrule earlier. So if you have declared, in the style sheet, a certain background color for a certain element, and the style block on the page itself, or an inline style, declares another background color for that element, the style block or inline style overrules the style sheet.
If you add !important to the declaration in the style sheet, that declaration is not overruled.
This question already has answers here:
What does !important mean in CSS?
(5 answers)
Closed 3 years ago.
How is the CSS attribute property !important read?
Is it really important, exclamation mark important, ...?
Answer: From the answers below, it seems to be read simply important, or bang important.
an "!important" declaration (the delimiter token "!" and keyword
"important" follow the declaration) takes precedence over a normal
declaration.
http://www.w3.org/TR/CSS2/cascade.html#important-rules
Basically, where two style rules are the same... it gives the one marked !important greater importance and will apply those styles.
Example
div{
opacity:0 !important;
}
div.jason{
opacity:1;
}
The first rule would be applied even though the second rule is more specific (one element + one class as opposed to one element)
Note: IE6 ignores !important when you have two of the same property and one of them is important - it'll always apply the last declaration, whether or not it was marked important. **Added from #BoltClock's comment below.
Warning: !important is a hammer that should only be used when absolutely necessary. Almost always, it is better to use more specific selectors to achieve greater specificity and have your styles applied the way you want. !important can make it very difficult for future developers to find and make changes to your code.
One good use case: !important is great for user-defined styles, where a user wants to manipulate Web site pages in specific way in his browser (say make all the backgrounds black and the text yellow). Without having to worry about specificity, the user can add styles to certain elements (like body) and make the styles render.
Just "important" or "bang important." The ! is definitely not a negation in this case.
It's not a tag, it's a keyword.
body { color: red !important; } means, in English, "The text-color of red is important".
In terms of how CSS sees it, it applies more "weight" to that declaration, so it will be (far) more likely to be the applied style.
For an example of this, we can use
p { color: red; }
p.blue { color: blue; }
Now, any p with a class of blue will show blue text, all the others will show red text.
If we change it to this...
p { color: red !important; }
p.blue { color: blue; }
They will all show red text (even if they have a class of blue), as we've given more important to the first selector.
I like to think of it as "NOT important".
p {
color: red !important; /* The rest is NOT important for this CSS property. */
}
Meaning that everything else from that declaration and on is NOT important and should not be taken into account. The idea came from the usage of the "!" character as a boolean NOT in many programming languages. This way the !important makes sense as you read it.
I guess I read the ! as "very".
p { color: red !important }
I read as "Paragraphs have the color red, which is very important.