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

See http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child — user123444555621, May 02 '14 at 06:30
@Zoe, take a look at these posts 1. http://stackoverflow.com/questions/22148594/how-can-i-select-the-last-list-item-of-a-specific-class-in-a-list-of-items?lq=1, 2. http://stackoverflow.com/questions/13211453/css-how-to-say-classlast-of-type-classes-not-elements, 3. http://stackoverflow.com/questions/6401268/how-do-i-select-the-last-child-with-a-specific-class-name-in-css?lq=1 However, I don't know of any method of achieving what you are after with *pure CSS* only. You have to use `Javascript` or `jQuery` or any other library based on `Javascript` for this particular task. — W.D., May 02 '14 at 06:33
Thanks Pumbaa80 and @W.D. I was 99.9% certain the lack of a parent selector would make this impossible with css alone, but was just holding a glimmer of hope that maybe there was some sass trickery to get around that limitation, maybe with `@if` or similar. Doesn't look hopeful! — Zoe, May 02 '14 at 06:38
Just the general desire to limit js wherever possible. Instead of js, I'll probably go back to the xslt guy and plead for an extra selector to hook into :) — Zoe, May 02 '14 at 06:55

score 1 · Accepted Answer · answered May 02 '14 at 06:31

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

answered May 02 '14 at 06:31

Kris

133
5

Since there doesn't appear to be a purely css solution to my problem, I'll mark this work-around as the correct answer. Thanks for your help! – Zoe May 05 '14 at 02:34

Applying CSS styles only to the lowest instance of a class

1 Answers1