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>
Related
i have few divs that are in same class and have diffrent id's. I need to change color for each div, and i don't know how to do it
I would like to have something like this
HTML code:
<div class="thing" id="one"></div>
<div class="thing" id="two"></div>
<div class="thing" id="three"></div>
CSS code:
#one{
color:green;
}
#two{
color:red;
}
.thing{
background-color: get color from id;
}
color - changing the text color
background-color - change the background of the element
Change all 'color' to 'background-color' and see if this is what you trying to do.
Instead of using color directly, you can use variables.
#one {
--thing-color: green;
}
#two {
--thing-color: red;
}
.thing {
color: var(--thing-color);
background-color: var(--thing-color);
}
.things{border-size = 10px} //for all element in class .things
#one{border-color = #blue} //for specific element id one
id element inherit by default
Could just set inline style for background colour for each?
<div class="thing" id="one" style="background: green;"></div>
<div class="thing" id="two" style="background: red;"></div>
<div class="thing" id="three" style="background: blue;"></div>
When I tested this it worked using background: red; and background-color: red;
Your mistake is using 'color' in the IDs instead of 'background-color'. This overrides the class' background color, if any.
#one{
background-color: green;
}
#two{
background-color: red;
}
#three{
background-color: blue;
}
should do the trick.
Use CSS pseudo element as first-child, last-child, nth-child(n)
.thing:first-child{
background-color: green;
}
.thing:nth-child(2){
background-color: red;
}
.thing:last-child{
background-color: blue;
}
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;
}
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>
Is there a way to avoid the "red highlight" in the last example?
Live Demo
<h3>should be:</h3>
<div class="demo">
<p>foo foo</p>
<p>bar bar</p>
</div>
<hr>
<div class="demo">
<p>foo foo<br>foo foo</p>
<p>bar bar</p>
</div>
<hr>
<div class="demo">
<p>foo foo<br>foo foo</p>
</div>
<h3>should not be:</h3>
<div class="demo">
<p>foo foo</p>
</div>
This is what I currently use:
.demo p:first-child::first-line {
color: red;
}
But, it highlights all examples, including the last one. I also tried these two:
.demo p:first-child::first-line:not(:only-child) {
color: red;
}
/* and... */
.demo p:first-child::first-line:not(:only-of-type) {
color: red;
}
But it seems it just brokes all the highlight in all demos.
Is there way to achieve the desired result? (Remove "red highlight" from the last example).
(JS/jQuery solution is also ok, but, if it could be solved with CSS, it would be much better).
Screenshot with desired result:
I have a solution in jQuery.
CSS:
.demo p:first-child:first-line {
color: red;
}
.demo .not-red:first-line {
color: green !important;
}
JS:
$('.demo p:only-child:not(:has(br))').each(function() {
$(this).addClass('not-red');
});
JS will add not-red class only to paragraphs that doesn't contain br tags and paragraphs that are only child.
CODEPEN
One way to achieve this is to set the color on :first-child and then override with :only-child:
.demo p:first-child::first-line {
color: red;
}
.demo p:only-child, .demo p:only-child::first-line {
color: inherit;
}
Example: https://jsfiddle.net/4s42cnrL/4/
please use
.demo:not(:last-of-type) p:first-child::first-line {
color: red;
}
https://jsbin.com/doqenagapa/4/edit?html,css,output
I'm trying to change style of WORK div when hovering at one of the hexagons. I've put them all into a table as a container, but it doesn;t seem to work.
Maybe you can give me a hint, thank you.
Example
I just answered another question like this (but was specific to a task). I shall use the same example so you can have a look at how it works.
You can do this just using CSS:
HTML:
<img name="image1" src="./goal/images/normalButton.png" style="vertical-align: middle; width : 183px;" />
<h2 class="mnrImageH2"><span class = "mnrImageSpan">Haberler</span></h2>
CSS:
.mnrImageH2 {
position: absolute;
top:1px;
left: 0;
width: 100%;
}
.mnrImageSpan {
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
padding: 10px;
}
h2 {
color: white;
}
img:hover + h2 {
color: #000;
}
So using the + selector we can select the h2 when we hover over an img. Take this and do what you need to do with it.
DEMO HERE
If I correctly understand your point the answer is "You cannot with current schema."
You shall use + or ~ selector. They works if elements have the same parent so you can apply CSS rule if any of hexagon is hovered but you cannot determine particular one.
Add the rule to your example to see what i'm saying:
*:hover + * > * > .work-box{
border: solid red;
}
If your elements have the same parent solution is quite simple - Example
There is good site for Russian speakers about ~ selector
This can help you in your problem and if you are not satisfy by this then comment on this post i will try to solve that also.
<div>
<div class="e" >Company</div>
<div class="e">Target</div>
<div class="e" style="border-right:0px;">Person</div>
</div>
<div class="f">
<div class="e">Company</div>
<div class="e">Target</div>
<div class="e" style="border-right:0px;">Person</div>
</div>
And use hover like this,
.e
{
width:90px;
border-right:1px solid #222;
text-align:center;
float:left;
padding-left:2px;
cursor:pointer;
}
.f .e
{
background-color:#F9EDBE;
}
.e:hover{
background-color:#FF0000;
}