Is it possible to dynamically set the text color of a list item based on the class name of its nested span element? For example, if the span has a class of "green", the text color of the parent li should also be green. How can this be achieved?
Demo:https://stackblitz.com/edit/angular-gr8adt?file=src%2Fapp%2Fapp.component.css
This question is unique and not a duplicate.
CSS:
.green{
color:green;
}
.gray{
color:gray;
}
span.arrow < li {
color:green;
}
span.gray < li {
color:green;
}
HTML:
<ul>
<li><span class="green"></span>Car</li>
<li><span class="green"></span>Bike</li>
<li><span class="gray"></span>Plan</li>
<li><span class="gray"></span>Cycle</li>
</ul>