How to target last div with specific class name

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...

Just a heads up, easiest way I think is to set another class. — Wesley Murch, Aug 19 '14 at 19:15
Please clarify for future answers how flexible you need this to be. Is it possible only the first one has the `done` class? Is it possible the third one or last one might have it? You're getting answers that rely on the element being the second one (or not the first one). I assume you want a more general solution. — Wesley Murch, Aug 19 '14 at 19:18
I wonder why couldn't you just add another class name to the target element? — Moshtaf, Aug 19 '14 at 19:37

score 4 · Answer 1 · answered Aug 19 '14 at 19:16

4

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.

answered Aug 19 '14 at 19:16

j08691

204,283
31
260
272

Thanks for your help. I added information to my original post about how the classes changes as steps are completed... – Rothgarr Aug 19 '14 at 20:48
Based on your update, I'd use JavaScript to target the element. – j08691 Aug 19 '14 at 20:49

score 1 · Answer 2 · answered Aug 19 '14 at 19:17

1

You could do this

.installSteps .done:not(:first-child) .text {
    color: red;
}

Will affect anything after first one.

JS Fiddle Demo

answered Aug 19 '14 at 19:17

Dan

9,391
5
41
73

Thanks for your help. I added additional info about how the classes change as steps are completed. Sorry I didn't provide this earlier as your suggestion won't work... – Rothgarr Aug 19 '14 at 20:49

score 1 · Answer 3 · answered Aug 19 '14 at 19:18

1

Try nth-child() applied to the .done class.

Example

 .done:nth-child(2) .text{
   background:red;
 }

DEMO

http://jsfiddle.net/a_incarnati/ntzj5wte/

answered Aug 19 '14 at 19:18

Alessandro Incarnati

7,018
3
38
54

That doesn't work the way you think it does. See http://jsfiddle.net/j08691/s4p7107a/. See how it's not selecting the second div with the class foo? Pseudo classes target elements, not classes of elements. In this case, there's no match because the nth-child(2) doesn't have the foo class. – j08691 Aug 19 '14 at 19:36
Yes but in case you know where the class is present, for instance: http://jsfiddle.net/a_incarnati/s4p7107a/1/ – Alessandro Incarnati Aug 19 '14 at 19:45
Thought I like your solution, more generic. More reusable. +1 – Alessandro Incarnati Aug 19 '14 at 19:47
Well, in your last example, it works without the class at all: http://jsfiddle.net/j08691/e2251eqo/. A lot of people mistakenly think that pseudo-classes work with classes when in reality they really limit the set of elements by restricting matches to the class you specify. – j08691 Aug 19 '14 at 19:49
1

Thanks for your help. I added additional info about how the classes change as steps are completed. Sorry I didn't provide this earlier as your suggestion won't work... – Rothgarr Aug 19 '14 at 20:51

How to target last div with specific class name

3 Answers3

JS Fiddle Demo