I've got a question about CSS files and it's order of applying in browser.
We have:
browser (system) CSS file,
user CSS file,
user CSS important file,
site CSS file,
site CSS important file,
When page is loaded some of CSS code replace other code depending on order or !important word. Is order I listed above correct, so site CSS important file can override all previous styling?
CSS code does not replace other CSS code, and the order of parsing style sheets is not relevant. There is really no order of application, since all applicable style sheets are taken into account. When several style sheets assign a value to a property of an element, then the conflict is resolved according to cascade rules. The order is then:
user agent declarations (browser default style)
user normal declarations
author (page) normal declarations
author (page) important declarations
user important declarations
So author (page) !important declarations trump everything but user !important declarations. In Css 1, the order was different, but this was changed in CSS 2 and browsers live by the current rules: the user always has the last word, if he wishes to exercise his rights.
No. User CSS files will be parsed after a site CSS files (otherwise it wouldn't make any sense to have a user CSS file). That doesn't mean it will automatically override everything in a website's css file however, normal CSS specificity rules still apply.
Let's make all paragraphs red for an example my website has the rule:
website.css: p { color: red; }
But if I implement a user style sheet (like userContent.css in FireFox) and say:
FireFox userContent.css: p { color: blue; }
The text color would be blue.
If I then mark the website's rule important:
website.css: p { color: red; !important }
The color would be red again.
Related
reference CSS 2.2 SPEC
When the same style sheet is imported or linked to a document in multiple places, user agents must process (or act as though they do) each link as though the link were to a separate style sheet.
I know each style sheet download once, even if they refer to each other! I'm curious about this sentence: user agents must process (or act as though they do) each link as though the link were to a separate style sheet.!
What did UA do to process style sheet was imported more than once, and what does the separate style sheet mean?
notice: I'm not ask about performance!
To an extent, this is a catch-all, to cover all behaviour where multiple links occur. But to give one example, suppose you have
File a.css
#import "b.css";
#import "c.css";
#import "d.css";
File b.css
h1 { color: red; }
File c.css
h1 { color: blue; }
File d.css
#import "b.css";
Then what the quoted text is saying is that the browser, on encountering d.css, can't simply act as if "I've already imported b.css, I'll just ignore it this time", because if it did all <h1> elements would, using the latter-specified-rule-wins requirement, have blue color.
Instead, it must reapply all the rules of the b.css stylesheet again, so that the latter rule is the one from b.css, and the <h1>s' color are red.
When I define a code for a class within the custom CSS of a post this is working however if I define the same code globally under my theme options-> Custom CSS this is not working.
.learndash-wrapper .ld-table-list a.ld-table-list-item-preview {
color: #13fff8;
}.
Therefore I have to go post by post adding this code to get the proper font color... and I would like to have it globally working.
Any idea why this happened?
First, check whether you have a typo or not. After verifying that you have entered class name properly. You can try out as,
.your-class-name{
color : #ffffff !important;
}
!important has the superpower to override previous CSS class and it's properties.
There are guidelines and defined the precedence of different CSS stylings.
Checkout,
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Ask in the comment if required a more specific answer.
Check with the order of the css files loaded. If you have declared multiple css for same element latest class css will be applied. Along with that check the specificity of the css selectors. The selector with higher specificity will be affect the style.
Is there a way or operator in CSS to assign a new style to specific element? I don't want to change original style because it belongs to a plugin and changing it will change it on all my pages. However I want to change the position of the element on a specific web page.
I also can't call those styles in my html because that CSS file is used solely in jquery plugin, you only put class="slideshow" in html div and thats that. I can change that CSS file to suit my preferences, however I don't know how to change it for specific instances?
In order to make a specific styling on a specific instance of your plugin, you should assign a specific class or id to a parent container of that plugin for the instance you need customization.
Example : you can give the id="special" to a parent of the plugin in the page you want customization.
Then you can use that selector to style it independently from other instances of that same plugin.
example CSS:
#special .slideshow /*other selectors */ {
/*your specific style */
}
In your scenario CSS specificity Rule will be helpful for you.
For example in your plugin you are using RED Font Color in class slideshow. Then in your another CSS file you can create a more specific Rule.
Check the Demo what I've posted above on comments section. Here is the direct link.
div.slider .slideshow {color:green;}
You can refer to the element by name:
#htmlitemname{
color: green;
}
CSS is cascading, i.e. it will apply it top down - general, class and then the id.
You can add !important to your css if you wish it to override any inline styles. So long as you make a style sheet specifically for that page, this should work for what you need. Hope this helps :)
I have a css sheet for a big project that I can't change, "cantChange.css"
I also have a css sheet for a small portion of the project that I am able to change "canChange.css"
Both css sheets describe the style for a certain class -- and cantChange.css is overriding canChange.css.
Is there any way to give priority to a certain style sheet for a URL? Is there another way to do this with css specificity rules?
The loading order of course is important. You should load "canChange.css" after you loaded the other one. On top of that CSS offers !important . Which allows for something like:
background-color: blue !important;
If that still doesn't do anything add an id to the element in question and style that one. IDs are always higher prioritized then classes or common selectors.
You've got a few options to address this:
Make your selector more specific (e.g. #body #small-project .cool-class)
Apply the styles inline (e.g. style="color: #000")
If you can change the order in which the stylesheets are loaded, load canChange.css file after cantChange.css
Give priority using !important (What does this mean?)
You can make your own declaration MORE SPECIFIC to override the others.
For example:
body.someclass .anotherclass { ... }
<body class="someclass">
will always override .anotherclass { ... }
I'm using Sass to compile my SCSS stylesheets into a single assembled.css to reduce HTTP requests. To namespace individual pages for styling, I wrap each page-specific CSS file in an ID selector for that page's <body> element - for example:
body#support {
.introduction {
#extend %dropcap;
}
}
In nanoc (using ERB), I have a helper that assigns each page's body a dash-separated unique ID based on the HTML folder structure, so the root pages will be #support or #products, while their sub-pages would have an ID like `#products-giantspacelaser'.
I want to make a set of SCSS rules that only apply to these 'products' sub-pages (not including the root-level #products page itself). Is there anything I should look out for regarding specificity if I use an attribute selector instead of an ID for this, as follows?
body[id^="products-"] {
.introduction {
#extend %dropcap;
}
}
I really don't want to use !important, but I do want to ensure that these page-specific rules take precedent over styles set in the '_base.scss' partial that precedes them in the #import order. Seeing as I have full control over the HTML structure, I could also theoretically use Erb in the Sass files to substitute in a comma-separated list of IDs like so:
body#products-giantspacelaser,
body#products-laboratorycamouflage,
body#products-resurrecteddinosaur {
.introduction {
#extend %dropcap;
}
}
- but that seems quite inelegant. Thanks in advance.
EDIT:
I've written my other styles in a really cascade-reliant way:
Normalise CSS
HTML5 Boilerplate's & my own sensible house rules
CSS Libraries (in this case Bourbon & Neat)
A "_source.scss" which in turn imports its own mixins & placeholder selectors.
A "_base.scss" which styles the default layout framework of every page.
A series of .scss files for each page's individual content styling - and, I hoped, overrides of base.scss layout decisions when necessary (if the page needs to take a serious departure from the norm).
Either way, these individual page stylesheets would need to definitely have a higher specificity than earlier defaults, as they were written for a specific purpose & page.
I'm intentionally not using any ID selectors except for this one specific purpose - namespaceing page stylesheets.
Using, say
.services .sharktraining .introduction .disarmingJoke {} --0,0,4,0
in "_base.scss" would surpass
body[id^="products-"] .disarmingJoke {} --0,0,2,1
in a further-down-the-cascade "products.scss", wouldn't it? (N.B. I know needing to use four classes is awful practice, I just don't want to worry about something slipping through the namespace).
I suppose there's another - really dirty - option: to repeat the body[id^="products-"] selector many times, to simply outnumber even the most specific class-strength rule.
It's going to have to depend on how you've written your other styles and whether or not they should take precedence (see: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/).
If you match the selector exactly but prefix one of them with your body selector, the prefixed one will be specific enough to take precedence no matter what (even if the order was reversed):
body[id^="products-"] .widget {
color: green;
}
.widget {
color: red;
}
The .widget will be green because the first selector is more specific than the second.
The only problem with using attribute selectors over ids is if you care about IE6. If that's a concern for you, the IE7 JS library by Dean Edwards can help you out: http://code.google.com/p/ie7-js/
If changing how the page information is attached to the body element is an option, my recommendation would be to have the parent directory be an id and the child pages be classes:
<body id="products" class="giantspacelaser" />
This way you can retain the specificity of the id:
// excludes the body#products page, which wouldn't have a class set at all
body[class]#products {
// styling here
}