Clever Geek Handbook

How to assign the last div with a specific class name

I'm trying to target a div with a "text" class inside a final div with a "done" class.

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've tried all sorts of combinations of the latter and the latter to no avail. I actually thought this would work:

.installSteps .done:last-child .text

How to do it?

EDIT: adding more details ...

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

So I'm looking for a way to target the latest "done" copy wherever it is ...

Sorry for not pointing this out earlier. I would like to add an additional class, but for now I cannot ...

+3


source to share


3 answers


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

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


JsFiddle example

If the hierarchy changes, then you will probably have to use JavaScript as you cannot target element classes with CSS pseudo-classes, only elements.

+4


source


You can do it

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


Will affect anything after the first.

JS Fiddle Demo

+1


source


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

Example

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

DEMO

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

+1


source






More articles:


All Articles