Question

我试图用课程＆＃34;文本＆＃34;来定位div。在课程的最后一个div里面＃34;完成＆＃34;。

例如：

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

我尝试了各种类型的last-child和last-of-type的组合无济于事。我真的认为这会奏效：

.installSteps .done:last-child .text

有什么办法吗？

编辑：添加一些其他细节...

＆＃34;完成＆＃34;班级取代即将到来的＆＃34;类作为流程完成。所以它始于所有＆＃34;即将到来的＆＃34;然后第一个完成＆＃34;完成＆＃34;那么第二个也有'＃34;完成＆＃34;，然后是第三个，然后是第四个......（所以我不能针对特定的第n个孩子）

所以我正在寻找一种方法来定位最后一个＆＃34;完成＆＃34;无论在哪里......

很抱歉没有提前说明。我希望我能增加一个额外的课程，但现在我无法...

Answer 1

如果层次结构没有变化，这对我有用：

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

<强> jsFiddle example

如果层次结构发生变化，那么您可能不得不使用JavaScript，因为您可以使用CSS伪类来定位元素类，而只使用元素。

Answer 2

你可以这样做

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

在第一个之后会影响任何事情。

JS Fiddle Demo

Answer 3

尝试将nth-child（）应用于.done类。

示例

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

<强>样本

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

如何使用特定的类名来定位最后一个div

3 个答案:

JS Fiddle Demo