Is there a method to change the parent's background color based on the child's class using CSS?
Here is the sample code snippet:
Sample Code
If the child has a class of red, the parent should have a red background. If the child has a class of yellow, then the parent should have a yellow background.
<div class="par">
<div class="red">
hello
</div>
</div>
.par{
background-color:red;
}
.par{
background-color:yellow;
}
.par{
width:200px;
height:200px;
border:1px solid blue;
}
.red{
width:100px;
height:100px;
color:red;
border:1px solid;
background-color:green
}
Would it be better to use Javascript or can this be achieved with just CSS?