How to target last div with specific class name [duplicate]

Question

I'm trying to target the div with class "text" inside the last div with class "done".

For example:

<div class="installSteps">
        <div class="insProgress done">
                <div class="icon">Img</div>
                <div class="text">Prep</div>
        </div>
        <div class="insProgress done">
                <div class="icon">Img</div>
                <div class="text">Check</div>   < trying to target this
        </div>
        <div class="insProgress upcoming">
                <div class="icon">Img</div>
                <div class="text">Configure</div>
        </div>
        <div class="insProgress upcoming">
                <div class="icon">Img</div>
                <div class="text">Go!</div>
        </div>
</div>

I tried all kinds of combinations of last-child and last-of-type to no avail. I really thought this would work:

.installSteps .done:last-child .text

Any way to do it?

EDIT: Adding some additional details...

The "done" class replaces the "upcoming" class as the processes complete. So it starts with all "upcoming" and then the first one gets "done" then the second one also has "done", then the third, then the fourth... (so I can't target a specific nth child)

So Im looking for a way of targeting the last instance of "done" wherever that may be...

Sorry for not specifying this earlier. i wish I could add an additional class but for now I am unable to...

Answer 1

Provided the hierarchy doesn't change, this works for me:

.installSteps div:nth-child(2) :last-child {
    color:red;
}

jsFiddle example

If the hierarchy will change, then you're probably going to have to use JavaScript as you can't target classes of elements with CSS pseudo-classes, only elements.