I have been searching the web to try and find an answer to my question but cant seem to find a direct answer. I use article classes a lot in my work, however never really needed to know whether they load in order i.e what comes first on the page.
Example
<div id="example" article class="example1 example2 example3">
Here's the div.
</div>
Additionally I would like to ask, if I set a background in example 1 and set a background in example two, would the background of example 1 be there underneath example two. I guess I am asking if it would be like stacking divs on top of one another.
The reason I ask is because I have an article class with a background of an ajax loader. However I need to load an image directly ontop of the ajax loader. Its my idea of making a budget preloader without all the scripting hastle.
Thanks again!
What you're asking about is the order of precedence of applying CSS rules. Simplified:
It does not matter in which order you specify the classes on an element (class="foo bar baz").
It does matter in which order you write the CSS declarations in your CSS file.
foo { ... }
bar { ... }
baz { ... }
Later rules override earlier rules.
You are applying properties specified in these CSS rules to an element. An element can only have one such property, they do not "stack". If two CSS rules specify the same property, later rules overwrite that property on the element.
Example:
<div class="baz bar foo">
.foo {
color: blue;
border: 1px solid green;
}
.bar {
color: black;
border-color: orange;
}
.baz {
color: red;
margin: 10em;
}
Again, the order of the classes in the class="..." attribute is irrelevant. All three classes are applied to the element. First, .foo, then .bar, then .baz. The element will have the following properties, which are the result of merging the above rules:
color: red; # from .baz
border-color: orange; # from .bar
border-style: solid; # from .foo
border-width: 1px; # from .foo
margin: 10em; # from .baz
(Note that rule precedence is actually a little more complex than that and actually depends on the specificity of the selector, but the above goes for equally specific selectors.)
Related
So my situation is that I'm working on a personal portfolio project (using React and Django but likely not relevant for this question), and each project is going to have it's own styles. However I want my website to essentially be a catch all for anything I want to do. Therefore the site has it's own unified stylings whilst each project individually might have different styles.
The specific situation is that with buttons. I have added an all: unset; to my base button styles to ensure that I get to style each button type individually (I am also accounting for focus and accessibility in case that's a concern). My hope was to essentially build my own "default" button style that's completely overridden if any styles are applied via a higher selector. So for example:
button {
all: unset;
padding: 1rem 2rem;
background-color: grey;
color: white;
}
.green {
// all: unset;
background-color: green;
}
<button>Submit</button>
<button class="green">Submit</button>
Here, the button on the right has all the same styles but with a different background colour. However ideally what I'd like would be what happens if you uncomment all: unset; in .green, where all styles are removed and you're left with a blank canvas onto which to write again. Obviously adding all: unset; to the class selector gives my desired result, but I was wondering if there was an easier way without having to specify for every new style? Adding multiple all: unset; tags throughout the styles seems untidy but I don't know of any better way unfortunately. Can anyone help?
In coding language, I essentially want the following logic but in CSS:
if (no selectors in element) {
default-styles;
} else {
selector-styles;
}
Happy to provide any extra info if necessary.
an idea can be to used the css :not selector on default style to avoid specific class to use it
your default style will do the all: unset but not the specific one
button:not(.green) {
all: unset;
padding: 1rem 2rem;
background-color: grey;
color: white;
}
.green {
background-color: green;
}
<button>Submit</button>
<button class="green">Submit</button>
Just wondering, can I make CSS inheritance skip a generation?
For example if I had this code:
Code:
.grandfather {
background-color: #fff;
}
.parent {
background-color: #333;
}
.child {
background-color: inherit;
}
<div class='grandfather'>
<div class='parent'>
<div class='child'>
Is there a way for the inherit command to take the background-color from the grandfather and completely ignore the parent? Or would i need to use a variable for that?
The short answer is no, you cannot. The inherit property always takes its value from its parent.
You can read more here: CSS inherit property
It touches on this issue with a specific note:
Note: Inheritance is always from the parent element in the document
tree, even when the parent element is not the containing block.
The simple solution is to have a class in the color you wish to use e.g. .blue {background: blue;} and add that into the HTML or use CSS custom properties (CSS variables) to effectively do that too.
If I have two different stylesheets and a class name that is being shared on both of them, something like this:
Home.css:
.myClass{
color: red;
}
Sales.css:
.myClass{
color: blue;
}
And now I would like to be able to to something like this:
<div class = "Sales.css.myClass" >....</div> <!--Here I am calling the blue color from Sales.css-->
Is there any way to specify from what stylesheet is the class I want to call?
CSS file priority depend on the sequence of files you have defined in the header, having the last one picked up, unless your rule has higher specificity.
However, what you are trying to do is a bad practice, leading to reduced readability and maybe conflicts.
Why don't you just put your rule to different rules in each file:
/*Home.css*/
.myHomeClass{
color: red;
}
/*Sales.css*/
.mySalesClass{
color: blue;
}
And then put the one you want to your element?
<div class = "mySalesClass" >....</div>
Simple CSS rule: later rule extends previous rules for same class.
That is
.myClass {
color: red;
font-size: 14px;
}
.myClass {
color: blue;
}
.myClass will be blue 14px font size.
Also you specify .myClass in CSS but your class in HTML Sales.css.myClass and that's different classes. Do you mean Sales css myClass?
When I want to apply a certain style to a div (specially using bootstrap 3), I create my own class like this:
.myClass {
width: 30%;
padding-right: 0px;
}
<div class="myClass"></div>
But sometimes the div style is overwritten by the bootstrap classes or another inherited properties (I don't understand completely the inheritance in CSS3), but if I apply directly in the div:
<div style="width: 30%;padding-right: 0px;"></div>
2 ways to force CSS on an element in this case :
You have you custom CSS located in a local .css file : put the <link> tag for this custom stylesheet after the Bootstrap css file.
Set the CSS rule !important after each properties so they will get an extra authority upon others
CSS inheritance
.myClass is less than div.myClass which is less than body div.myClass.
The Bootstrap is using usually more than one identifier. Like .ourClass.theirClass.yourClass which is hard to overwrite. Inspect your element in your browser to see the inheritance and try to overwrite it the css way before using any !important attributes.
The last rule defining a style of the element will be aplied to it.
So if you have various stylesheets in your page, the order of the files should be in the order you want them to be applied. example:
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="secondStyle.css">
Every style rule(not an entire block) that is written in the second file will be the definitive one in the website.
the same rule apllies within files, for example:
.ClassOne {
color: red;
}
... othes styling ...
.classOne {
color: Black;
}
In this case the color in the browser will be Black because it was the last one and it overwrites the first one.
There is another rule that can affect styling - The more specific rule will be the definitive one, example:
.one .two .three {
color: red;
}
.two .three {
color: blue;
}
.one .three {
color: green;
}
<div class="one">
<div class="two">
<div class="three">
some text
</div>
</div>
</div>
Question: In which color will the text show?
Answer: red.
Why? because in the case above, we call the .three element in a more specific way when we declared the red color.
check it here:
https://jsfiddle.net/wxaw3205/
The same example with more elements:
https://jsfiddle.net/wxaw3205/1/
The last way is using the !important declaration, it provides a way for You to give a CSS value more weight than it naturally has.
For the last example, lets assume that we have the same html markup of the example above, which will be the color now?
.one .two .three {
color: red;
}
.two .three {
color: blue;
}
.one .three {
color: green !important;
}
Answer: green.
Link to live example: https://jsfiddle.net/wxaw3205/2/
And just a little tip: never style the element using the style="" attribute, unless you have too! and either the !important.
Most of the time when you have to use them its because you'r stylesheet needs to be reordered.
That's all, I hope it helped you understand.
I want to know the order of loading the CSS files in a HTML page.
My actual requirement is like this: I have more than 10 CSS files in my application.
I am importing some 3 to 4 CSS files in each HTML page. The problem is I have duplicate classes that defined in some CSS files. That means I override some of the CSS classes in the CSS files.
In some pages it behaves correctly. In some pages it behaves wrongly. I have inline styles defined for some of the DIVs in HTML page also. I am keeping CSS class for that DIVs also.
Can anyone know which one will take higher priority or which one loads first ?
Generally the last rule takes precedence. With that being said, there are "exceptions" in that inline styles take precedence over external stylesheets ( an inline !important is more important than an external !important, etc ), and more specific selectors override generic selectors.
Read all about it # http://www.w3.org/TR/CSS2/cascade.html
CSS files are loaded in the order that they appear in the page. If a class is redefined in a CSS file, it will override the previous class statements.
So
div.sample { background: none; width: 200px }
and
div.sample { color: #FFF; width: 400px }
will become
div.sample { background: none; color: #FFF; width: 400px }
You can also use the '!important' addin to make rules take precedence over other defined rules.
So
div.sample { background: none; width: 200px !important }
and
div.sample { color: #FFF; width: 400px }
will become
div.sample { background: none; color: #FFF; width: 200px !important }
Note: Many people will advise against using the '!important' addin in your CSS files. Personally, I see nothing wrong with it.
Each element will be rendered based on the properties from the last style-sheet from which it has been selected. Properties which have been declared as !important; are an exception. Part of the problem is that you have 10 style-sheets.