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.
Related
I have a div within a webpage I am trying to target with the following code to create a flexbox:
div.my-div-class {
display: flex;
flex-wrap: wrap;
}
div.my-div-class > label {
fl
Originally I had a problem with the User Agent Styles overriding the div and causing it to automatically display block. I fix that per this question by adding the following code:
div {
display: inherit;
}
Which I assumed, perhaps naively, that this would cause the div to "inherit" the styles of what I set to the class.
I check the console, and sure enough see:
div { display: inherit; }
instead of what was there before for the User Agent which was:
div {display: block;}
Which is what I assumed was messing with my style originally.
I tried !important to see if that would at least cause a change and it didn't.
So I'm thinking I don't fully understand the behavior of inherit or how to target this particular div correctly.
Can someone explain this a little bit? I should mention this div is wrapped in a form, and the HTML of that form is like below:
<div id="form-container">
<form id="form">
<div class="my-div-class" id ="the-target-div">
/*Rest of the HTML*/
</div>
</form></div>
Generally you don't really need to target the div tag, you should instead use a class.
If you are creating your own CSS and not using some library, such as bootstrap, it's a good idea to use a CSS reset to make sure you are writing CSS on a clean slate. This is a popular one.
To answer your question, the inherit property sets a css property to inherit the value from its parent. A div tag by default is a block level element, so setting anything to inherit below it will also set it to display: block.
Just target whatever you need to be flex with the class name, such as:
.my-div-class {
display: flex
}
It seems that you didn't copy all of your html code, cos it looks like it's broken in the middle.
If you want to target this particular div you should do it by refering to it's class or id. Property value "inherit" inherits ONLY the property from its parent element that it is set as a value to.
For example:
.parentElement {
display: flex;
background: yellow;
height: 200px;
width: 100%;
}
.childElement {
display: flex;
height: 100px;
width: 70%;
background: blue;
}
.childElement:hover {
height: inherit;
}
<div class="parentElement">
<div class="childElement">
</div>
</div>
In this example when we hover over the child element we are setting height value to "inherit" which inherits the value ONLY for height property, but the width for example doesn't change.
In short: if you want your div to inherit all styles his parents has you should set "inherit" as a value for every property it's parent has.
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 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.)
I write a html element as below ::
<div class="box"> Foo box </div>
and write css like
.box {
width: 400px;
height: 40px;
color: red;
text-align: center;
}
or
div.box {
width: 400px;
height: 40px;
color: red;
text-align: center;
}
I want to ask that how the both css for box class is different than each other.
The difference is that in the first class you tell that all element (div, p, span ...) with class box have that attribute.
Like this:
<span class="box">test</span>
<div class="box">test</div>
<p class="box">test</p>
The second class means that only div with class box has that attribute
Only this elements get second class:
<div class="box">test</div>
The selector before the class specify which type of elements can take this class
One very important difference between div.box and simply .box is in something called selector specificity. It is a set of rules which defines which selector gets more weight once the browser starts going through all the selectors that potentially have influence on a particular element.
What this means is easily demonstrated in the following example (DEMO)
We have a simple div containing some text.
<div class="box">
Zarro boogs found!
</div>
Now we add some CSS selectors to the example.
div.box {
padding:0.8em;
background: #bd0000;
color: #fff;
}
.box {
color: #bd0000;
}
One of the most basic rules of CSS is that selectors can be redefined in a way that whatever definition comes last and has influence on a particular element its the one that is going to be used (the sole exception being when using !important which always takes precedence).
Now in the above example redefining the .box class selector should actually hide the text but instead its still visible. How is that possible if we said that latter rules always take precedence? Its because the div.box rule has a higher specificity that .box since it actually gets points for containing both an element (div) and a class selector (.box) in its selector declaration (div.box).
Of course the div.box rule will be applied only on a div element but since class selectors are often reusable pieces of code there is plenty of situations when they are used on divs.
Although the rules in the official W3 specification are not that hard to understand they are sometimes pretty hard to remember. That's why I would like to recommend an excellent article on CSS selector specificity which can be found here.
In my opinion selector specificity is by far the most important thing to master when it comes to tracing inheritance problems with CSS stylesheets.
.box means any element having class box.
Example:
<div class="box">...</div>
<section class="box">...</section>
<span class="box">...</span>
div.box means only div element having class box.
Example:
<div class="box">...</div>
Two parts to my question:
1) Is there a way to inherit another control's attributes and styles in CSS? Assume the controls have no parent/child hierarchy and can be completely different control types:
IE:
#MyFirstControl
{
width: 100px;
}
#MySecondControl
{
width: MyFirstControl.styles.width; /* This doesn't work */
}
2) Assume a Label tag is a child of any other tag. The width attribute will neither work with "inherit" nor "auto". What's wrong?
IE:
<style>
div
{
width: 100px;
}
</style>
<div>
<!-- This label does what it wants for width. It's not the width of the containing div -->
<label style="width: inherit">Some Text</label>
<div>
Part 1: you want to use class names, not ids, to control the styles:
.control_a {
width: 100px;
}
<blah id='MyFirstControl' class='control_a'/>
<blah id='MySecondControl' class='control_a'/>
This lets you share styles across any number of tags. Also, keep in mind, you can use more than one class name on a single element:
.control_a {
width: 100px;
}
.red { background: #f00; }
.blue { background: #00f; }
<blah id='MyFirstControl' class='control_a red'/>
<blah id='MySecondControl' class='control_a blue'/>
This lets you select many different sources of style for a single element.
There is no way to inherit CSS "objects". You can inherit styles from tags inside other tags, but it is the tag inheriting and not the style itself. If you place a tag inside a tag with another style, it will inherit from that style.
It might be interesting if CSS styles were treated as objects, as you could avoid a lot of coding, but since you can create a class that can be applied to disparate types of objects, and even apply multiple classes to a tag, it is more interesting than necessary.
I am not sure about the second question, but I would imagine it has to do with the fact you are applying to a tag name, and not using a class or id. I would have to play with it some more to see if I can figure something out.
1) Since CSS doesn't allow for self-reference you could have common aspects of two separate elements specified in the same style:
#MyFirstControl, #MySecondControl
{
width: 100px;
}
2) If my IDE and browser are to be believed, inherit is not a valid value for width in that context but I'm not sure why. That might be why your example doesn't work.