I am trying to apply styles to a span element only when a child element in a preceding sibling div element is active, which means a radio button has been checked.
I am unable to modify the code and can only use CSS for this task.
Any ideas on how to achieve this?
<label class="One">
<span class="Two">
<div class="Three">
<input class="Four" type="radio">
<a class="Five ui-state-default"></a>
</div>
<span class="Six">Don't highlight this</span>
</span>
</label>
<label class="One">
<span class="Two">
<div class="Three">
<input class="Four" type="radio">
<a class="Five ui-state-active"></a>
</div>
<span class="Six">Highlight this</span>
</span>
</label>
- I need to highlight span.Six but only when a.Five has "ui-state-active"
An alternative approach could be highlighting the label element (the second "label.One" above) only if the child element 3 levels down is "active".
Thank you for your assistance!