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.
Related
I am trying to reduce the size of some titles of my commerce in responsive version. I have tried a bit of css but nothing has worked.
At the moment, I have the following for the main slider text:
#media only screen and (max-width: 600px) {.zphero-banner-style-11 .zpheading, .zshero-banner-style-11 .zpheading {font-size: 22px;;}}
This is my web
enter image description here
Where am I going wrong?
Your css path currently looks like this.
#media only screen and (max-width: 600px) {
.zphero-banner-style-11 .zpheading, .zshero-banner-style-11 .zpheading {
font-size: 22px;;
}
}
Without the associated HTML its hard to say but my initial guess is the classes that are already applied on it have greater importance than your new media query. I would try this adding !important and if it doesnt work make your selector more specific.
#media (max-width: 600px) {
.zphero-banner-style-11 .zpheading, .zshero-banner-style-11 .zpheading {
font-size: 22px !important;
}
}
fun things to note about selector importance:
100 points for IDs
10 points for classes and pseudo-classes
1 point for tag selectors and pseudo-elements
Note: If the element has inline styling that automatically wins (1000 points)
Among two selector styles browser will always choose the one with more weight. Order of your stylesheets only matters when priorities are even - that's why it is not easy to override Bootstrap.
currently your media query css selectors have a value of 20 points because there are 2 class names pointing to the change
CSS declarations marked as important override any other declarations within the same cascade layer and origin. Although technically, !important has nothing to do with specificity, it interacts directly with specificity and the cascade. It reverses the cascade order of stylesheets. Not the best practice but it works well often
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
This question already has answers here:
How are the points in CSS specificity calculated
(7 answers)
Closed 3 years ago.
Using MDC I get the following structure:
<div class="mdc-fab">
<span class="mdc-fab__icon">
<i>x</i>
</span>
</div>
In the CSS file from MDC there is the following rule:
.mdc-fab .mdc-fab__icon {
font-size: 24px;
}
However in my own CSS-file I have this rule that overrides the rule above:
* {
font-size: 1rem;
}
I want that rule to ensure that no font-size is less than 16px. However here it overrides the rule from MDC which is not what I want.
Can I rewrite my rule in some way?
EDIT: Since there seem to be some confusion, please look at this Codepen: https://codepen.io/lborgman/pen/RwNGzmP
And please observe that I can not change the MDC rule.
.mdc-fab .mdc-fab__icon {
font-size: 1rem;
}
Specificity wins so you will need to be specific.
You are mistaken in that your selector of * overrides .mdc-fab .mdc-fab__icon; the latter will override the former. This is a problem of specificity.
In order to overcome this, you'll want to increase the specificity of your selector so that it is either higher than that of MDC or equal to it and referenced later.
It depends on the specific element you need to target, and there are numerous ways to achieve this, but one approach would be to target the <i> with:
.mdc-fab .mdc-fab__icon i {
font-size: 1rem;
}
Or alternatively make use of the child combinator > with:
.mdc-fab > .mdc-fab__icon {
font-size: 1rem;
}
To target the <span> itself.
If you only want to have to declare it once, you can make use of the !important declaration, though this is generally frowned upon, as it carried the highest level of specificity (making it very difficult to override). If, however, you are certain that you want to apply this font-size to all elements on your page, then it will be the easiest option:
* {
font-size: 1rem !important;
}
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
How is it possible to override styles specified in another style sheet?
I do not want to use the !important tag to override them. I would much rather specify a new style sheet, put styles in there. Could this be achieved by changing the load order of the style sheets?
It depends. CSS stands for Cascading Style Sheets, and there's a specific order that styles are applied in, overwriting previous styles. Without going into too much detail:
If your rules have the same specificity, just load your stylesheet second and everything will work fine.
If your rules have higher specificity, the order won't matter.
If your rules have lower specificity, you'll need to modify them to match.
So, what's specificity? Basically, it's the sum of each selector in a rule. So this:
a {
background-color: black;
color: white;
}
Has less specificity than this:
body a {
color: orange;
}
ID selectors have higher specificity than class selectors, which have the same specificity as pseudo-class selectors, which have higher specificity than tag selectors. So if all your content is contained in a <div> with an id of content, you would be able to override a style that looks like this:
body a {
border: 0;
}
With:
#content a {
border: 1px solid black;
}
The boostrap stylesheet should be loaded first, your stylesheet second, this way your overwrites will be picked up.
This is called "cascading", from the documentation:
Cascading
This is the capability provided by some style sheet languages such as CSS to allow style information from several sources to be blended
together. These could be, for instance, corporate style guidelines,
styles common to a group of documents, and styles specific to a single
document. By storing these separately, style sheets can be reused,
simplifying authoring and making more effective use of network
caching. The cascade defines an ordered sequence of style sheets where
rules in later sheets have greater precedence than earlier ones. Not
all style sheet languages support cascading.
If you can increase the specificity of styles, you can do this without the !important.
For example:
HTML
<div id="selector">
<a>Hello</a>
<a class="specific">Hi</a>
</div>
CSS
div a {}
Will be ignored, if you give a specific class inside #selector
.specific { }
Here is a demo explaining my point. Basically, the idea is to define the styles as closely as possible.
look at http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html.
<p class="example">
This is a <strong>test</strong>.
</p>
strong { color: red; }
p strong { color: green; }
p.example strong { color: blue; }
The text will be blue. The order of the rules doesn't matter.