My parent page is using custom1.css and child page is using custom2.css. My issue is child page css properties are override by parent page css. How can I block parent page css acting on the child page elemenets.
CSS styles are apply as the order those are in. Check this example, first style override by the second and final width of div will be 40px.
div{
width:300px;
}
div{
width:40px;
}
linking style sheets also the same.
<link rel="stylesheet" type="text/css" href="style_1.css">
<link rel="stylesheet" type="text/css" href="style_2.css">
Here style_2.css override the same styles in style_1.css because it links secondly.
So what you have to do is, style sheet you need to apply link lastly.
Css is applied using levels.
So just adding a container around everything shoudl prevent it
You can do:
.class1 #content{ make it blue here }
.class2 #content{ make it red here }
Doing it by file is not possible.
You should make sure that never happends, this can yield unexpected results
How can i block parent page css acting on the child page elemenets?
By removing the custom1.css reference from the <head> of the child page.
If, for some reason, you cannot do that, then you need to read about css specificity in order to understand how the "parent css" is overriding rules in the "child css".
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
You could either add !important; after your css styles (which is a bad example) or you could make some more specific selectors.
body div#main{
/* Style */
}
The above is more specific and will "win" over the following:
div#main{
/* Style */
}
On you your child page please check that you CSS order should be in correct way if you are using both CSS files
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="custom1.css">
<link rel="stylesheet" href="custom2.css">
</head>
so that cascading will work in correct way as per your expectation
also there are other things that you need to check like CSS Specificity, Inheritance, and the Cascade. You may like to check http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ this
Hope it helps!
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.
I am encountering some issues with CSS rules on a website I am working at this moment.
It is using a custom theme based on WPBakery Visual Builder. Issue is, I need to edit the background color of a element. I have tried both:
Editing the row background color in WPBakery. The issue is that it shows correctly in the editing panel, but not on the actual website.
Adding custom CSS rules for that element.
Problem is, a stylesheet probably overrides my rules that I have set up. Explaining screenshot:
https://imgur.com/a/YI5Df4i
Any ideas on solving this?
Add more specificity to your element, for example:
div{
width:100px;
height:100px;
}
div.test{
background:blue !important;
}
.test{
background:red !important;
}
<div class="test"></div>
Without the div part in the selector the square would have taken the last css rule and apply it since they both would have same specificity same as in your case.
Unfortunately is used !important, avoid doing this. But try to be more specific, for example: .parent-div .your-class { color: pink } ... and probably you must add also !important; But I recommend you to edit your theme and delete !important at least where you have problems. Also is important order of import styles.css, add a custom file and put it last in the like:
<head>
<link rel="theme.css" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Browser will take the last declaration.
I am incorporating bootstrap into my pages, but it's altering some of the spacing in an edge script and some of the borders in my nav menu. I would like to "turn off" bootstrap css styling is some of my div tags. How can I do this? As an example I would like to prevent my local bootstrap css file from styling the following #logo tag:
<head>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div id="logo">
<script type="text/javascript" charset="utf-8" src="logani_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-915774383 { visibility:hidden; }
</style>
<div id="Stage" class="EDGE-915774383"> </div>
</div>
</body>
You cannot. CSS works so that all style sheets that apply to the document apply to it as a whole. The drafted scope attribute of style element may change this one day, but even with it, you would be able to restrict the applicability to a specific element and its descendants, not to exclude.
So if you are using, say, the Bootstrap CSS, you need to deal with. You can inspect (using a browsers developer tools) how it affects a particular element, and then you can override those settings if needed by using rules that “beat” them in the cascade.
Honestly, I think you just have to give more "specifity" to any CSS that you have of your own.
I guess you have any, let's call it "main.css" file where you have your "customized" css. There you can just specify, maybe with !important, the styles you want to keep.
Another option is to do the same I've just said but adding some class to your html that bootstrap is not using, even id.
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/your-custom-changes.css">
<!-- see that you are just using the cascade feature of css -->
</head>
What I would do for sure it would be to respect the bootstrap css theme, so you can change it for another one any time you want.
Quoting (What is the meaning of "cascading' in CSS?):
"Cascading" in this context means that because more than one
stylesheet rule could apply to a particular piece of HTML, there has
to be a known way of determining which specific stylesheet rule
applies to which piece of HTML.
The rule used is chosen by cascading down from the more general rules
to the specific rule required. The most specific rule is chosen.
You've got some issues here that aren't at all related to Bootstrap. In fact, you're not using any Bootstrap selectors in the markup you've provided.
One issue is that you need to move your <style> block into <head>.
Your second issue is that .edgeLoad-EDGE-915774383 { visibility:hidden; } will not match class="EDGE-915774383". Either change your CSS selector to .EDGE-915774383 or your class to class="edgeLoad-EDGE-915774383".
I have two CSS files, let's call them style1.css and style2.css for simplicity's sake.
I include them in this order:
<link rel="stylesheet" type="text/css" href="style1.css" />
<link rel="stylesheet" type="text/css" href="style2.css" />
Style one is a more general file with lots of classes and attributes. Style2 overwrites these.
For example, style1 has this:
.row-fluid > .span9 {
width: 74.358974359%;
}
Whereas, style2 has:
.span9{
width:50%;
}
I have some .row-fluid DIVs that contain .span9 elements and the first style is used for them, even though browsers should accept only the last CSS rule if duplicate selectors are found.
I discover this by going to Chrome Developer Tools and I see the span9 definition coming from style9 as crossed and the definition from style1 is at the top and is used instead.
PS: To be specific, style1 is the Twitter Bootstrap CSS and style2 is my own CSS started from scratch.
You're understanding the cascading part, but perhaps not the specificity rules of CSS. The first rule more specifically selects the element than the second rule, so it is chosen instead.
Try changing that second rule to this:
.row-fluid > .span9 {
width: 50%;
}
A. you need to change "span9" to ".span9".
B. Here's a good resource regarding CSS precedence. http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
I'm trying to show a print-preview div (#preview in examples). Is there a way to use print.css only for a particular div and its children overriding all local definitions?
Essentially, I would like to be able to do something similar to:
#preview element {
definition equal to definition of an element in print.css
}
in main.css, but for a long list of definitions. It's not too DRY and following option is more coherent.
Second approach would be to include print.css into the main document and change each definition from
element {
definition
}
to:
element, #preview element {
definition
}
But that seems to me a bit cumbersome.
What would be the best way to solve this problem?
Update just to give an example:
in the main document I have red underlined links, they should be blue undecorated in print version. So when content of preview is dynamically formed, I pop up div where all links should be blue undecorated. But only in that particular div (#preview), in the rest of the document they still would be red and underlined.
Maybe making the div an iframe that holds a different page styled by the print.css
Alternately you could set the media on print.css tag to be "print" but during print preview you could have a script change the media to "all".
Maybe I still haven't grasped your question, but it seems you should be able to do this by simply linking the print.css stylesheet after your main stylesheet, and prefixing all the selectors in print.css with "#preview ".
In the links example, you would need to specify a style like:
#preview a, #preview a:link
{
text-decoration:none;
color:blue;
}
This should be pretty simple unless you are dynamically creating the print.css file.
<link rel="stylesheet" href="/main.css" type="text/css">
<link rel="stylesheet" href="/print.css" type="text/css">
</head>
<body>
<div id="main">
content
</div>
main.css:
selector1 {style}
selector2 {style}
and so on
print.css:
#print selector1 {style}
#print selector2 {style}
and so on
Then, when you generate your print preview, just change (via JavaScript or whatever) the id of your main wrapper from "main" to "print".
As I recall, a more specific CSS declaration will always override a less specific declaration, unless the less specific one is marked as important.
So... #preview element { } will always override element { }
Add this to your stylesheet:
#media print {
#preview a:link {
color:blue;
}
}