I have the following CSS code in a custom.css style sheet which is part of the Main theme
.thm-unit-test h3 {
font-size: 28px !important;
}
I have added the following code to my child theme CSS
.thm-unit-test h3 {
font-size: 18px !important;
color: #222;
font-weight: 700;
}
But it is not not working. With this in mind how do I override the !important in the main custom.css. Because if I can override it than the code in my child theme can take effect
Use the Body tag in front of it... be more specific:
body .thm-unit-test h3 {
font-size: 28px !important;
}
Or other parent elements...
Take some time to understand CSS Selector Priority:
Understanding CSS selector priority / specificity
A selector's specificity is calculated as follows:
count 1 if the declaration is from is a 'style' attribute rather than
a rule with a selector, 0 otherwise (= a) (In HTML, values of an
element's "style" attribute are style sheet rules.
These rules have no
selectors, so a=1, b=0, c=0, and d=0.) count the number of ID
attributes in the selector (= b) count the number of other attributes
and pseudo-classes in the selector (= c) count the number of element
names and pseudo-elements in the selector (= d) The specificity is
based only on the form of the selector.
the form "[id=p33]" is counted as an attribute selector (a=0, b=0,
c=1, d=0), even if the id attribute is defined as an "ID" in the
source document's DTD. Concatenating the four numbers a-b-c-d (in a
number system with a large base) gives the specificity.
In particular, a selector of the form "[id=p33]" is counted as an attribute selector
(a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source
document's DTD.
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the > specificity.
https://www.w3.org/TR/CSS2/cascade.html#cascading-order
I'd use an ID in front of it tbf.
It should work, make sure that the call for the css of the main theme is above your custom css in the HTML
<head>
<link rel="stylesheet" type="text/css" href="themeCss.css">
<link rel="stylesheet" type="text/css" href="yourCustomCss.css">
</head>
Let me know if that help you!
Related
In an HTML header, I've got this:
<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>
styles.css is my page-specific sheet. master.css is a sheet I use on each of my projects to override browser defaults. Which of these stylesheets takes priority?
Example: first sheet contains specific
body { margin:10px; }
And associated borders, but the second contains my resets of
html, body:not(input="button") {
margin: 0px;
padding: 0px;
border: 0px;
}
In essence, does the cascading element of CSS work the same in terms of stylesheet references as it does in typical CSS functions? Meaning that the last line is the one displayed?
The rules for CSS rule cascading are complex -- rather than trying to paraphrase them badly, I'll simply refer you to the spec:
http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade
In short: more specific rules override more general ones. Specificity is defined based on how many IDs, classes, and element names are involved, as well as whether the !important declaration was used. When multiple rules of the same "specificity level" exist, whichever one appears last wins.
The most specific style is applied:
div#foo {
color: blue; /* This one is applied to <div id="foo"></div> */
}
div {
color: red;
}
If all of the selectors have the same specificity, then the most recent decleration is used:
div {
color: red;
}
div {
color: blue; /* This one is applied to <div id="foo"></div> */
}
In your case, body:not([input="button"]) is more specific so its styles are used.
Order does matter. The last declared value of multiple occurrence will be taken. Please see the same one I worked out: http://jsfiddle.net/Wtk67/
<div class="test">Hello World!!</div>
<style>
.test{
color:blue;
}
.test{
color:red;
}
</style>
If you interchange the order of .test{}, then you can see the HTML takes value of the last one declared in CSS
The last loading CSS is THE MASTER, which will override all css with same css settings
Example:
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/master.css">
</head>
reset.css
h1 {
font-size: 20px;
}
master.css
h1 {
font-size: 30px;
}
The output for the h1 tag will be font-size: 30px;
Lets try to simplify the cascading rule with an example. The rules goes more specific to general.
Applies rule of the ID's one first (over class and/or elements
regardless of the order)
Applies classes over elements regardless of order
If no class or id, applies the generic ones
Applies the last style in the order (declaration order based on file load order) for the same group/level.
Here is the css and html code;
<style>
h2{
color:darkblue;
}
#important{
color:darkgreen;
}
.headline {
color:red;
}
article {
color:black;
font-style:italic;
}
aside h2 {
font-style:italic;
color:darkorange;
}
article h2 {
font-style: normal;
color: purple;
}
</style>
Here is the css style
<body>
<section>
<div>
<h2>Houston Chronicle News</h2>
<article>
<h2 class="headline" id="important">Latest Developments in your city</h2>
<aside>
<h2>Houston Local Advertisement Section</h2>
</aside>
</article>
</div>
<p>Next section</p>
</section>
Here is the result. No matter the order of style files or the style declaration, id="important" applies at the end (note the class="deadline" declared last but does not take any effect).
The <article> element contains <aside> element, however last declared style will take effect, in this case article h2 { .. } on third h2 element.
Here is the result on IE11: (Not enough rights to post image)DarkBlue: Houston Chronicle News, DarkGreen: Latest Developments in your city, Purple: Houston Local Advertisement Section, Black: Next section
It depends on both load order and the specificity of the actual rules applied to each style. Given the context of your question you want to load your general reset first, then the page specific. Then if youre still not seeing the intended effect you need to look into the specificity of the selectors involved as others have already pointed out.
The best way is to use classes as much as possible. Avoid ID selectors (#) anyway. When you write selectors with just single classes, the CSS inheritance is way more easy follow.
Update: Read more about CSS specificity in this article: https://css-tricks.com/specifics-on-css-specificity/
I suspect from your question that you have duplicate selections, a master set, that goes for all pages, and a more specific set that you wish to override the master values for each individual page. If that is the case, then your order is correct. The Master is loaded first and the rules in subsequent file will take precedence (if they are identical or have the same weight). There is a highly recommended description of all rules at this website http://vanseodesign.com/css/css-specificity-inheritance-cascaade/ When I started with front end development, this page cleared up so many questions.
It is the cascade that defines the precedence of declarations. I can recommend the official specification; this part of it is well-readable.
https://www.w3.org/TR/css-cascade-3/#cascading
The following have an effect on the sorting, in descending order of priority.
A combination of origin, and importance:
Transition declarations
User agent’s declarations marked with !important
User’s declarations marked with !important
Page author’s declarations marked with !important
Definitions on the element with style attribute
Document-wide definitions
Animation declarations
Page author’s declarations
Definitions on the element with style attribute
Document-wide definitions
User’s declarations
User agent’s declarations
If two declarations have the same origin and importance, the specifity, meaning how clearly the element is defined, comes into play, calculating a scoring.
100 points for every identifier (#x34y)
10 points for every class (.level)
1 point for every element type (li)
1 point for every pseudo-element (:hover) excluding :not
For example, the selector main li + .red.red:not(:active) p > * has a specifity of 24.
The order of appearance only plays a role if two definitions have the same origin, importance and specificity. Later definitions precede earlier definitions in the document (including imports).
EDIT: Apr 2020, according to #LeeC's comment, this is not longer the case
Yes, it works the same as if they were in one sheet, however:
Load Order Matters!
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>
In the above code, there is no guarantee that master.css will load after styles.css. Therefore, if master.css is loaded quickly, and styles.css takes a while, styles.css will become the second stylesheet, and any rules of the same specificity from master.css will be overwritten.
Best to put all your rules into one sheet (and minify) before deploying.
I believe when executing the code, it is read top to bottom, meaning the last CSS link would be override similar styles in any style sheets above it.
For example, if you created two style sheets
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
and in both of these, you set the body background-color to two different colors - the color of the body in style2.css would take priority.
You could avoid the styling priority issue by using !IMPORTANT inside the class style you would like to take priority, or possibly re-arranging your <link> order.
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
what's the precedence on asset pipeline
I want to overwrite part of ace.css style with user.css.scss
Stylesheet file ace.css in vendor folder is expected to be overriden by user.css.scss .
But it didn't work at all (given I include ace.css between user.css.scss, that is I imported the user.css twice )
user.css.scss
div#user_bottom a.btn{
color: red;
background-color: #ffffff;
}
ace.css
.btn {
display: inline-block;
color: #FFF !important;
background-image: none !important;
}
layout file
I tried to put the user.css.scss TWICE
one is before the ace.css
and the other after the ace.css
= stylesheet_link_tag params[:controller]
%link{href: asset_path("ace-admin-theme/css/uncompressed/ace.css"), rel: "stylesheet"}/
= stylesheet_link_tag params[:controller]
The haml
%div#user_bottom
%a.btn{class: "btn-#{button_color}",href: url }
result
user.css.scss still be override by ace.css
It's not a problem of ordering your files.
If you have an element
<div id="user_bottom"><a class="btn">A</a></div>
The more precise CSS selector will be the last used. So div#user_bottom a.btn will be used before .btn because it's more "precise".
Replace your ace.css first line by
.btn, div#user_bottom a.btn {
To be more "precise", and defined after the first rule.
http://www.w3.org/TR/CSS2/cascade.html says
To find the value for an element/property combination, user agents must apply the following sorting order:
Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all #media rules containing the declaration and on all links on the path through which the style sheet was reached.
Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:
user agent declarations
user normal declarations
author normal declarations
author important declarations
user important declarations
Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.
I have the following html:
<div class="main">
<div class="container">
<h4 class="test"> Test </h4>
</div>
</div>
And the following CSS:
.main .container h4 {
color: red;
}
.test {
color: blue;
}
Why would the class .test not overwrite the color rule? How can I accomplish this?
Thanks
This is a specificity issue.
Specificity is how important a certain selector is. In this case your first declaration uses two classes, and an element. This means only an inline style, #id or something with more classes can over write it.
If you want to affect the class test, we can use .main .container .test, this is 3 classes and will now over write it!
If two things have the same specificity, for example if you use .main .container h4 again, the one that comes last in the document will take precedence.
There is a way to over write regardless of your specificity or where it comes in the document, and that is by adding !important to a certain style, for example .test { color: blue !important; }. This is not recommended if you can use what is described above as this may cause future issues.
The spec can be found here
A selector's specificity is calculated as follows:
count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
count the number of ID attributes in the selector (= b)
count the number of other attributes and pseudo-classes in the selector (= c)
count the number of element names and pseudo-elements in the selector (= d)
The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.
I guess this is fairly simple for you but i cant wrap my head around it. I ripped out the important part. I got text inside #content so i cant change it and i dont want to use !important tag.
The css is presented in the order it is placed in my css file.
How come the "#content h2 a, #content h2 a:visited" overrides the .post-header h2 a?
<html>
<head>
.....
</head>
<div id="content">
.....
<div class="post-header">
my text
</div>
</div>
</html>
#content h2 a, #content h2 a:visited {
font-family:"arial black","lucida console",sans-serif;
}
.post-header h2 a {
font-family:Arial,sans-serif;
}
/Joel
First, the browser checks the cascading order. Since the declarations are all for the same media, importance, and origin, the rules are ordered by specificity.
Next, the browser calculates the selector's specificity, and (here's the important part for your question) Id selectors are higher priority than class selectors:
A selector's specificity is calculated
as follows:
count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0
otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
count the number of ID attributes in the selector (= b)
count the number of other attributes and pseudo-classes in the selector (= c)
count the number of element names and pseudo-elements in the selector (= d)
The specificity is based only on the
form of the selector. In particular, a
selector of the form "[id=p33]" is
counted as an attribute selector (a=0,
b=0, c=1, d=0), even if the id
attribute is defined as an "ID" in the
source document's DTD.
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.
id is more specific than class. In your case you could add the id before the class.
#content .post-header h2 a {
font-family:Arial,sans-serif;
}
You can use the following:
.post-header h2 a {
font-family:Arial,sans-serif!important;
}
To add additional priority to a CSS rule, and ensure that it overrides any others.
Selectors based on ID's take precedent over selectors based on classes.
If you want your class-based style to override the ID selector, append a !important to the element style.
.post-header h2 a {
font-family:Arial,sans-serif !important;
}
!important doesn't work in IE6 though, if you care about those kind of things.