I am trying to change the color of child elements when their parent has a specific class.
.parent {
width: 100%;
}
.parent>.child {
color: black;
}
.parent>.child.blue {
color: blue;
}
.parent.error {
color: red !important;
}
.parent.error>.child {
color: red !important;
}<div class="parent">
<div class="child">Child #1</div>
<div class="child blue">Child #2</div>
</div>After adding the "error" class to the parent using jquery $('.parent').addClass('error'), only Child #1's color changes to red. Child #2 (which has an additional blue in its class) remains blue.
The challenge is how to make Child #2 also change its color to red without specifying .parent.error > .child.blue for the error class.
/*This style needs to be added for it to work*/
.parent.error > .child.blue {
color: red !important;
}
Thank you...