I'm really new to HTML and CSS and I have just studied nesting where I've got an issue with one of the css challenges for beginners.
Here are the challenge requirements:
to make the word (title) red.
to make the word (child title) blue.
to make the word (paragraph content) green.
to make the word (section title) green too.
I was already gives the HTML code and as per the requirements I MUST NOT make any change in it.
div div span {
color: red;
}
div span {
color: blue;
}
p {
color: green;
}
<div class="parent">
<div class="child">This Is Child <span class="title">Title</span></div>
<span class="title">Child Title</span>
<p>Paragraph Content</p>
</div>
<div class="title">Section Title</div>
Kindly assist with number 4. Thank you very much in advance.
Can take note of this CSS for all requirements.
> = child selector
~ = sibling selector
, = comma represents styles for both elements separately
.parent>.child>span {
color: red;
}
.parent>.child~.title {
color: blue;
}
.parent>p,
.title {
color: green;
}
<div class="parent">
<div class="child">This Is Child <span class="title">Title</span></div>
<span class="title">Child Title</span>
<p>Paragraph Content</p>
</div>
<div class="title">Section Title</div>
Change your CSS to
div div span {
color: red;
}
div span {
color: blue;
}
p {
color: green;
}div {
color: green;
}
Related
If I use this css, the span's text color is determined by its closest parent (i.e. text is blue):
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}
<div class="green">
<div class="red">
<div class="blue">
<div class="my-component">
<span>Hello World</span>
</div>
</div>
</div>
</div>
However, I want this behavior for .my-component specifically. I therefore added .my-component to my selector but suddenly, the span's text color is determined by the definition order (i.e. text is green):
.red .my-component {
color: red;
}
.blue .my-component {
color: blue;
}
.green .my-component {
color: green;
}
<div class="green">
<div class="red">
<div class="blue">
<div class="my-component">
<span>Hello World</span>
</div>
</div>
</div>
</div>
Why is this?
EDIT
Ok, so I messed up a bit here. As noted in the comments, I was mostly surprised that the distance between .red and .my-component did not affect specificity. However, my second question was the one I was really interested in. This question has already received a lot of great answers to the first question, so I'm reverting this question to its original state and will split the second question off into a new one. Thank you all for the great answers!
Given that the question was (originally) titled: "Can a component be styled based on its closest parent in pure CSS?" and looking at the original examples given
you can do it like this:
.red > .my-component {
color: red;
}
.blue > .my-component {
color: blue;
}
.green > .my-component {
color: green;
}
<div class="green">
<div class="red">
<div class="blue">
<div class="my-component">
<span>Hello World</span>
</div>
</div>
</div>
</div>
The > demands a direct parent-child relationship. A "grandparent" will have no effect on the target element's formatting.
However, the above snippet will not work if the target div is placed several levels under the innermost "colored" div.
This is all determined by Specificity:
Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. The specificity algorithm calculates the weight of a CSS selector to determine which rule from competing CSS declarations gets applied to an element.
With this being said, you can use more specific selectors such as the child combinator > with reference to the element to specify styles. You'll notice the more specific I get with the selectors that it will take precedence over other styles.
.red .my-component {
color: red;
}
.blue > .my-component span {
color: blue;
}
.green .my-component {
color: green;
}
<div class="green">
<div class="red">
<div class="blue">
<div class="my-component">
<span>Hello World</span>
</div>
</div>
</div>
</div>
If I were to use .green > .red > .blue > .my-component span in the last part of the CSS then this would take precedence because it is more specific. An example of that is below.
.red .my-component {
color: red;
}
.blue > .my-component span {
color: blue;
}
.green > .red > .blue > .my-component span {
color: green;
}
<div class="green">
<div class="red">
<div class="blue">
<div class="my-component">
<span>Hello World</span>
</div>
</div>
</div>
</div>
So this happens because the code below:
.red {color: red;}
.blue {color: blue;}
.green {color: green;}
influences the color of the element and its children.
Since one children is inside the another and CSS selectors here have the same priority then the one that is the cloest (the last) has the final word.
The color value is inherited but every time changed because of your classes. That's why the sequence in html has a meaning.
.red .my-component {color: red;}
.blue .my-component {color: blue;}
.green .my-component {color: green;}
In the second case you are targeting only .my-components inside the proper class elements so when you change color to red, you are then changing it to blue and at last to green. That's why the sequence in css file has a meaning and not in html.
I hope this will help.
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>
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
}
<style>
.main_block{}
.main_block:hover{}
.heading{background-color:red}
.content{background-color:blue}
</style>
<div class="main_block">
<div class="heading">
New Product
</div><br>
<div class="content">
This is my new product
</div>
</div>
I want to change heading div to background-color:orange and content div to background-color:yellow whenever hovering over the main_block using only CSS
Voila!
You need to start with the main-block, isolate its :hover state, then narrow by the child element- requiring one rule for each per below:
.heading {
background-color: red
}
.content {
background-color: blue
}
.main_block:hover .heading {
background-color: orange
}
.main_block:hover .content {
background-color: yellow
}
<div class="main_block">
<div class="heading">
New Product
</div>
<br>
<div class="content">
This is my new product
</div>
</div>
you can do this in LESS or SASS like so.
.main_block{
&:hover{
.heading {
background-color:orange;
}
.content {
background-color:yellow;
}
}
}