Applying CSS styles only to the lowest instance of a class

Question

I'm putting together some CSS/SASS for menu from html that has been supplied to me. When I'm on a page about Red Apples, the html looks something like this:

<ul class="navigation">
    <li class="active"><a href="#">Fruit</a>
        <ul>
            <li>Banana
                <ul>
                    <li><a href="#">Yellow</a></li>
                    <li><a href="#">Green</a></li>
                </ul>
            </li>
            <li class="active"><a href="#">Apple</a>
                <ul>
                    <li><a href="#">Green</a></li>
                    <li class="active"><a href="#">Red</a></li>
                    <li><a href="#">Yellow</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Vegetables</a></li>
</ul>

When I'm on a page about Apples, there is no active class on the colours, so that portion might look like this:

<li class="active"><a href="#">Apple</a>
    <ul>
        <li><a href="#">Green</a></li>
        <li class="active"><a href="#">Red</a></li>
        <li><a href="#">Yellow</a></li>
    </ul>
</li>

Likewise, if I'm on a page about fruit, the Apples list item will lose its active class.

My question is, given this markup, is there a way using just CSS/SASS to apply a background colour only the lowest instance of the active class?

Edit: Here's a fiddle

Answer 1

CSS does not support any parent selectors. You will have to use JQuery to achieve your requirement.

For example you can write the below code to make yours work

In Css give

li.active{ color: "#ff0000";}

In Jquery

$(".active").has(".active").css("color","#000000");

This will make all elements with class active to have text color as red and once that have another element with class active to have text color black