This question already has answers here:
What is the order of precedence for CSS?
(9 answers)
Understanding CSS selector priority / specificity
(4 answers)
Closed last year.
I am trying to style the row highlight of my DT.
I'm adding custom css in ui.R using :
table.DataTable tbody tr.selected td {
background-color: aliceblue !important;
color: white;
}
This works as I can see it does in DevTools (pic below; bottom), but it gets overwritten by what I'm assuming is the default style for DT (pic below; top). This also works if I disable the default style (top) in DevTools, i.e. my (selected) rows will be aliceblue (#b0bed9) and not white.
How can I stop DT from overwritting custom css? Is this expected/desired behaviour?
The problem is the css Specificity.
See https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Let's say you have the following css for example:
Div1, div2, div3 {
background-color: blue;
}
That will be overwritten by
Parrent, Div1, div2, div3 {
background-color: green;
}
But they will both be overwritten by
#div3 {
background-color: red;
}
It all depends on the selector you use.
A element selector is 1.
Class selector is 10.
Id selector is 100.
Think of specificity as a score/rank that determines which style declaration are ultimately applied to an element.
But in regards to !important
Some rules of thumb:
Always look for a way to use specificity before even considering !important
Only use !important on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap or normalize.css).
Never use !important when you're writing a plugin/mashup.
Never use !important on site-wide CSS.
Instead of using !important, consider:
Make better use of the CSS cascade
Use more specific rules. By indicating one or more elements before the element you're selecting, the rule becomes more specific and gets higher priority
Related
This question already has answers here:
When to use the !important property in CSS [duplicate]
(13 answers)
How are the points in CSS specificity calculated
(7 answers)
Closed 5 years ago.
Do I need to add !important to all properties in the media queries I've written for my site like in the example below?
I had the CSS below at the bottom of my stylesheet, but I found that these properties did not reflect my design until I added the !important tags. I understand that using the !important tag is not best practice.
CSS
.loginbar {
padding: 20px;
}
.logo {
display: inline-block;
}
#media screen and (max-width: 1042px) {
.loginbar {
padding: 10px !important;
}
.logo {
diplay: none !important;
}
}
HTML
<div class=".logo"></div>
<div class="loginbar">Log In | Sign Up</div>
In theory, no - you don't need the !important flag. The issue you are probably experiencing arrises from specificity:
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors
Mozzila
The basic math (hugely simplified) behind specificity is a weighted approach.
id is worth 100,
class is worth 10,
tag is worth 1.
Therefore a.class (tag + class = 11) is less specific that a#id (tag + id = 101).
CSS is also applied in a last-match-wins format, that is to say that the style for the last declared selector that matches will be applied (sorted according to the above specificity).
So - in your example, it could be that there are elements on you page with the class .element which is being targeted with a more specific selector (such as .container div > ul li + li .element (which is a lot more specific than just .element) so the styles from that is overriding the styles from your media style.
The caveat to this, is if the !important flag is being used. In which case the only way to override the styles is to supply the !important flag again.
There are numerous questions about the order of loading CSS files and overriding classes, but after reading them I still have something I can't figure out.
There are two CSS files:
<link rel="stylesheet" href="standard.css" type="text/css">
<link rel="stylesheet" href="override.css" type="text/css">
loaded in this order (I checked that).
The HTML looks like this:
<div class="div_D1 ov_D1">
<div class="div_D2 ov_D2">
<div class="div_D3 ov_D3">
blablah
</div>
</div>
</div>
Standard.css contains:
.div_D1{
background: white;
}
.div_D2{
height: 10px;
}
.div_D1 .div_D3{
padding-left: 20px;
}
Override.css contains:
.ov_D1{
background: red;
}
.ov_D2{
height: 50px;
}
.ov_D3{
padding-left: 0px;
}
.ov_D1 and .ov_D2 are applied correctly: the background of .div_D1 is red, the height of .div_D2 is 50px.
.ov_D3 on the other hand does not behave as I expected. If I look at the order the rules are applied, the browser first applies .ov_D3, and then .div_D1 .div_D3, leaving me with an unwanted padding of 20px.
If however I change the class selector in Override.css to
.div_D1 .ov_D3 it does remove the padding.
Also changing the css to
.ov_D3{
padding-left: 0px; !important
}
does the trick. So there are solutions, I only can't understand why with a single selector the order of loading is respected, and with multiple selectors it is not.
This is called specificity of a Selectors. From the book Beginning CSS: Cascading Style Sheets for Web Design, Third Edition by Ian Pouncey and Richard York:
In addition to style sheet precedence, an order of precedence exists for the selectors contained in each style sheet.
This precedence is determined by how specific the selector is.
For example, an ID selector is the most specific,
and the universal selector is the most general. Between these, the
specificity of a selector is calculated using the following formula:
Count 1 if the styles are applied from the (X)HTML style attribute, and 0 otherwise; this becomes variable a.
Count the number of ID attributes in the selector; the sum is variable b.
Count the number of attributes, pseudo-classes, and class names in a selector; the sum is variable c.
Count the number of element names in the selector; this is variable d.
Ignore pseudo-elements.
Now take the four values and put them together in groups of four.
For Example:
Selector : div.someclass.someother
Selector Type : Element Name + Class Name + Class Name
specificity:
0,0,2,1, (a = 0, b = 0,
c = 2, d = 1)
In CSS, there are rules for specificity (quoted from MDN):
The following list of selectors is by increasing specificity:
Universal selectors
Type selectors
Class selectors
Attributes selectors
Pseudo-classes
ID selectors
Inline style
Since you have added specificity to your Selector you weren't able to override by normal CSS class selector.
So your Code
.div_D1 .div_D3is more specific than.div_D3and less specific than.div_D3.ov_D3.
JS Fiddle
As per MDN CSS selectors have rules called 'Specificity' which determine their order of precedence. The more specific a rule is, the greater it's priority regardless of position within a/some stylesheet(s).
A rule such as .class-1 .class-3 has a specificity (it's more specific) higher than .class-3 and takes precedence, as such the less-specific rule cannot override it without the use of !important which negates all other specificity rules. Using the higher specificity rule only takes place with conflicting styles, however.
So, you have set the rule:
.div_D1 .div_D3 { }
The above rule is more specific than:
.ov_D3 { }
Even though they target the same element the rule with the higher specificity takes precedence. You can fix this in your JS Fiddle by prepending the appropriate class structure as defined above.
So, .ov_D3 becomes either:
.div_D1 .ov_D3
or
.ov_D1 .ov_D3
Example here: JS Fiddle
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).
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.
I have 2 css files in my page:
Site.css
jquery-ui.css
Site.css is listed BELOW the jquery-ui css
I have a link that looks like this on my page:
<a class='closeClueTipLink'>close</a>
and the issue is that the link is showing up black instead of the normal blue text. When i use firebug to figure out why, i see this:
I don't understand why .ui-widget-content (which has the color #222222) is overriding .closeClueTipLink (which as color:blue) given that site.css is below the jquery one.
Any ideas or suggestions why this ordering is happening ?
Because there's an a selector just after .ui-widget-content:
.ui-widget-content a
Making it more specific than .closeClueTipLink, even though .closeClueTipLink is found in a later stylesheet.
You could easily balance this out by adding the same type selector to your other rule so you get a.closeClueTipLink, making both selectors equally specific (1 type and 1 class). Then that, being the rule that's defined and loaded later, will apply and your link text will be blue.
Quick Fix:
Add an "a" before your class selector:
a.closeClueTipLink {
Explanation:
It has to do with Specificity [details].
The .ui-widget-content a is more "specific" because it references a class AND an element, as opposed to yours which just references a class. Therefore, the .ui-widget-content a will override anything less specific regardless of location/placement of code.'
By adding an "a" before your selector, you make it ALSO reference an element and a class, therefore it's no longer less specific and will use location to determine.
Example:
/* css */
div p { color: red; }
p { color: blue; }
<!-- html -->
<div><p>Text</p></div>
The text in the above paragraph will be red because the first CSS item is more specific than the second.
.ui-widget-content a is more specific than .closeClueTipLink so it will overide it no matter what order they are placed in.
change it to read
a.closeClueTipLink
Because .ui-content-content a { } is loaded after the previous style .closeClueTipLink.
I am pretty sure jquery...tom.css is loaded after site.css, so the styles defined later overrides previously defined styles.
There are ways you are amend this problem:
Pinpoint the selector like .ui-content-content a.closeClueTipLink
Use !important at the end of color defination. color: #222 !important;[not recommended]