Understanding last-child

I have the following html structure:

<div class="decorator">
    <div class="EC_MyICHP_Item">
        <div开发者_JS百科 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.

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/

.EC_MyICHP_Item:last-child should work well.

It's important to realize that E:last-child means "an E element, which is a last child", not "last child of E element".

I added the ID for merely testing purposes.

But use :last.

http://jsfiddle.net/aDbcW/1/

.EC_MyICHP_Item:last-child would only work if the div is the last child of its parent div. Since you have div.readmore as the last child of the parent, your selector wouldn't work. You need to use .EC_MyICHP_Item:last-of-type instead.

Edit: in jQuery this would translate to .EC_MyICHP_Item:last.