Search code examples
csspseudo-classcss-selectors

Apply css last-child to an element that is not the immediate child in ul li

I have this HTML --

<ul class="parent">
<li>
    <div class="child-1 x">
        <div class="child-2 x">test</div>
    </div>
</li>
<li>
    <div class="child-1 x">
        <div class="child-2 x">test</div>
    </div>
</li>
<li>
    <div class="child-1 x">
        <div class="child-2 x">test</div>
    </div>
</li>
</ul>

And this CSS --

.x{
    border:1px solid black;
    padding: 10px;
}
.child-1:last-child{
    border-color:red;
}

http://jsfiddle.net/BDj2h/1/

Im trying to apply red border only to the last child-1 div. But its not happening. CSS last-child pseudo class checks whether its the last element inside its immediate parent, not in the whole DOM(which was my wrong understanding).

Any idea how to do this with css only?

Solution 
  • li:last-child .child-1

    Would have the same effect.

    JSFiddle