I was reading MDN docs about inherit keyword and the example there is very confusing to me can anyone PLEASE explain to me the exact example on MDN docs about excluding selected elements from the rule. Thank you.
Examples
Exclude selected elements from a rule
/* Make second-level headers green */
h2 { color: green; }
/* ...but leave those in the sidebar alone so they use their parent's color */
#sidebar h2 { color: inherit; }
In this example, the h2 elements inside the sidebar might be different colors. For example, if one of them were the child of a div matched by the rule ...
div#current { color: blue; }
... it would be blue.
It is my first time asking question so please don't mind my formatting.
Let's take it step by step in this snippet:
/* Make second-level headers green */
h2 {
color: green;
}
/* ...but leave those in the sidebar alone so they use their parent's color */
#sidebar h2 {
color: inherit;
}
div#current {
color: blue;
}
<h2>this is an h2 outside the sidebar so it should have the color set for h2 in the style sheet which is green.</h2>
<div id="sidebar">
<h2>This is an h2 inside the sidebar so it has inherited its parent's color - which in this example is the default which is black</h2>
<div id="current">
<h2>This is an h2 inside a div. The div has id current and color blue. This h2 has inherited its parent's color which is blue.</div>
</div>
Are you looking for this example?
h2 {
color: green;
}
.sidebar h2 {
color: inherit;
}
.sidebar {
color: blue;
}
.red {
color: red;
}
<h2>This is Green Heading</h2>
<div class="sidebar">
<h2>This is Blue Heading</h2>
<div class="red">
<h2>This is Red Heading</h2>
</div>
</div>
the first h2 element will be green, because it has a css rule.
The second h2 for example became black because he has the rule inherit so he get the color of his parent.
If sidebar has another parent with color declared, h2 get this color
h2 {
color: green
}
div#current {
color: blue;
}
.sidebar h2 {
color: inherit
}
<h2> Green </h2>
<div class="sidebar">
<h2>Default color</h2>
</div>
<div id="current">
<div class="sidebar">
<h2>Default color</h2>
</div>
</div>
Related
I would like to force a specific attribute on children elements, from the level of the parent. I thought that using !important would be enough, but it is not taken into account on children elements:
.up {
color: red !important;
}
.down {
color: blue;
}
<div class="up">
<div class="down">
this text should be red
</div>
</div>
Is it possible to cascade !important down to the children elements?
You can do the following:
.up > * {
color: red !important;
}
This will affect all direct child elements. (You could probably erase the !important in this case, but that depends on the order of the rules and on theselector specifity of the rules for the child elements)
If you want to apply it to ALL children (not just the direct ones), use it without the >, like
.up * {
color: red !important;
}
.down {
color: blue;
}
.up > * {
color: red;
}
<div class="up">
<div class="down">
this text should be red
</div>
</div>
Please try this
.up>.down {
color: red;
}
I hope this is the solution that what you looking for.
.up > .down {
color: red;
}
.down {
color: blue;
}
If u add the html like below the code and ur css will be correct..
HTML:
<div class="up">
this text should be blue
<div class="down">
this text should be red
</div>
</div>
Or Do u want the reverse color then, change the css code
css
.up {
color: blue !important;
}
.down {
color: red;
}
<div class="up myclass">
<div class="down">
this text should be red
</div>
</div>
.up {
color: red !important;
}
.down {
color: blue;
}
.myclass .down {color:initial; color:inherit;}
Whenever you have this kind of situation if you are working other person's code then never edit the initial code because you never know what that code is working for. In this situation you need to do is create your own class and edit the children with your own class.
If you can change the CSS anyway, you can do this without needing !important.
.up {
color: red;
}
:not(.up) > .down {
color: blue;
}
<div class="up">
<div class="down">
this text should be red
</div>
</div>
<div class="down">
this text should be blue
</div>
I have a parent element with a red background. I want an h2 element to blend just some words with the background, and other words, inside a span tag, no.
My example below is not working.
How to make it work?
.bg-red {
background: red;
}
.blend {
mix-blend-mode: difference;
color: white;
}
.isolate {
isolation: isolate;
}
<div class="bg-red">
<div class="blend">
<h2>This text should <span class="isolate">(This one shouldn't)</span> be blended
</h2>
</div>
</div>
View on JSFiddle
In order to make it working you need to specify the isolation before applying the mix-blend-mode. So between the background and the text on where you will apply mix-blend-mode you need to have a wrapper where isolation is set.
Here is an example where the background is applied on the h2 and inside we have many span. We apply mix-blend-mode on them and we wrap the non-needed one with another wrapper where we apply isolation:
h2 {
background: red;
}
h2 span {
mix-blend-mode: difference;
color: white;
}
.isolate {
isolation: isolate;
display: inline-block;
}
<h2>
<span>This text should</span>
<div class="isolate"><span>(This one shouldn't)</span></div>
<span> be blended</span>
</h2>
But if you apply mix-blend-mode on the h2 you won't be able to isolate any of its content:
.red {
background: red;
}
h2 {
mix-blend-mode: difference;
}
h2 span {
color: white;
}
.isolate {
isolation: isolate;
display: inline-block;
}
<div class="red">
<h2>
<span>This text should</span>
<div class="isolate"><span>(This one shouldn't)</span></div>
<span> be blended</span>
</h2>
</div>
In CSS is it possible to use the inherit property to inherit from a specific element?
For example is there CSS syntax which could let this <p> inherit from container1 instead of container2? Assuming there isn't cause searched for quite a while to find this but I hope you can prove me wrong.
.container1{
color: blue
}
.container2{
color: green
}
.p {
color: inherit;
}
<div class="container1">
<div class="container2">
<p>
foo
</p>
</div>
</div>
To prevent an element from inheriting from its parent, you could explicitly exclude it from its parent's CSS using the :not() pseudo-class:
For example:
.container2 :not(p) {
color: green;
}
Snippet:
.container1 {
color: blue;
}
.container2 :not(p) {
color: green;
}
<div class="container1">
<div class="container2">
<p>
Feeling rather blue today.
</p>
<span>
It's not easy being green.
</span>
</div>
</div>
* {
color: yellow
}
.outermost {
color: blue
}
.middle {
color: red
}
<div class="outermost">
<div class="middle">
<p>Some Text</p>
</div>
</div>
I expect the color of <p>Some Text </p> to be red because <div class="middle"> is its parent. However, the color ends up as yellow. This seems counter-intuitive because the global selector is less specific than the parent container. Why does the p element inherit from global, and how can it be changed so that it inherits from the parent container?
As #j08691 notes in his comment, the universal selector * has no effect on specificity:
* {
color: yellow;
}
.middle {
color: red;
}
<div class="middle">
<p>Some Text</p>
</div>
If you'd like the specificity to operate under normal effects change the * to body:
body {
color: yellow;
}
.middle {
color: red;
}
<div class="middle">
<p>Some Text</p>
</div>
You're conflating inheritance with specificity. Those aren't the same thing; they're totally unrelated concepts in CSS.
It's true that the global selector has a much lower specificity than the .middle class selector, but that's irrelevant because the .middle selector isn't targeting your p element; it's targeting the p element's parent.
Normally that would be sufficient to make p use red text, because, by default, p has its color property set to the special value called inherit, which causes it to inherit its color from it's parent element. But p isn't using the default value (inherit) for its color property, because you have a matching rule telling explicitly to use yellow instead:
* {
color: yellow;
}
Inheritance doesn't even come into play here, because your p element isn't set to inherit from it's parent in the first place.
You can override that behavior using a selector with a higher specificity that targets the element containing your text (not just one of its ancestors) explicitly telling it to inherit from its parent:
* {
color: yellow;
}
.outermost {
color: blue;
}
.middle {
color: red;
}
.middle > p {
color: inherit; // This overrides the rule defined by the global selector above
}
<div class="outermost">
<div class="middle">
<p>Some Text</p>
</div>
</div>
Or alternately, you could just stop using the global selector and instead rely on inheritance to set the text color for most of your elements:
body {
color: yellow;
}
.outermost {
color: blue;
}
.middle {
color: red;
}
<div class="outermost">
<div class="middle">
<p>Some Text</p>
</div>
</div>
Note that using the global selector for this sort of thing is usually discouraged anyway, for numerous reasons.
To help you better understand why your current code isn't working, here's essentially what it's doing:
<div style="color:blue;"> <!-- Matches * and .outermost. Result: Blue -->
<div style="color:red;"> <!-- Matches * and .middle. Result: Red -->
<p style="color:yellow;">Some Text</p> <!-- Matches *. Result: yellow -->
</div>
</div>
This is how you would target the font inside the "middle" class https://jsfiddle.net/DIRTY_SMITH/cfckvvzw/3/
.middle > p {
color: red
}
Guyz i m completely new on css so i have this quiestions.....
h1 {
color: red
}
p{
color: blue
}
#ftx {
color: green
}
<h1>It appears fine red</h1>
<p>Pretty good appears blue</p>
<div id="ftx">
<h1> why doesn't it appears green?</h1>
<p/>Neither it appears green</p>
</div>
Why doesn't the div tag inherit h1 and p?
why doesn't the ftx id inherit the h1 and p tag inside the div tag?
The style indicated does apply to the text in the div unless it is overriden by other styles.
In the snippet below, you can see that the span is green because no other styling has been applied.
That is not the case for the h1 and p whether the existing styles apply because they have not been overridden.
h1 {
color: red
}
p {
color: blue
}
#ftx {
color: green
}
div {
border: 1px solid grey;
}
<h1>It appears fine red</h1>
<p>Pretty good appears blue</p>
<div id="ftx">
<h1> why doesn't it appears green?</h1>
<span>Lorem ipsum dolor sit.</span>
<p>Neither it appears green</p>
</div>