Question

I have the following html structure:

<div class="decorator">
    <div class="EC_MyICHP_Item">
        <div class="text">
            <h3><a target="_blank" title="" href="#"></a></h3>
            text here text here text here text here text here text here 
        </div>
    </div>

    <div class="EC_MyICHP_Item">
        <div class="text">
            <h3><a target="_blank" title="" href="#"></a></h3>
            text here text here text here text here text here text here 
        </div>
    </div>

    <div class="EC_MyICHP_Item">
        <div class="text">
            <h3><a target="_blank" title="" href="#"></a></h3>
            text here text here text here text here text here text here 
        </div>
    </div>

    <div class="readmore"><a></a></div>
</div>

I am trying to select the LAST EC_MyICHP_Item, by using last-child, but in vain. (both CSS and jQuery) Could you help me?

Thanks.

Answer 1

You need to use :last-child at the end of the selector.

div.EC_MyICHP_Item:last-child

http://reference.sitepoint.com/css/pseudoclass-lastchild

Example: http://jsfiddle.net/jasongennaro/zrufd/

Please note: this will not work in earlier versions of IE.

EDIT

As per the comment about the last div being added and it interfering. You’re right. It does cause :last-child to choke… at least in Chrome where I tested it.

If your HTML structure remains the same, that is, always three div.EC_MyICHP_Item, you could do this

.EC_MyICHP_Item:nth-child(3)

Updated Example: http://jsfiddle.net/jasongennaro/zrufd/1/

EDIT #2

unfortunately the number of EC_MyICHP_Item div’s varies

In that case, I would use jQuery:

$('.EC_MyICHP_Item:last')

Further updated example: http://jsfiddle.net/zrufd/2/