How to target last child of specific class

Question

I want to target the last child of the active class either with jQuery or CSS I used the last-of-type pseudo class but it didn't work

HTML CODE

<div class="owl-item cloned">Element</div>
<div class="owl-item cloned">Element</div>
<div class="owl-item cloned">Element</div>
<div class="owl-item active">Element</div>
<div class="owl-item active">Element</div>
<div class="owl-item active">This What I want to target</div>
<div class="owl-item cloned">Element</div>
<div class="owl-item cloned">Element</div>

CSS CODE

.owl-item {
    background-color: green;
    color:#FFF;
    margin: 10px 50px;
    padding: 10px
}
.owl-item.active:last-of-type {
    background-color: red;
}

This is a live demo JsFiddle

It's *well worth your time* to read through the [jQuery API](http://api.jquery.com) beginning to end. It only takes an hour or two, and repays you that much time within days at most. — T.J. Crowder, Mar 10 '15 at 12:29
@T.J.Crowder I still learn jQuery but this was an emergency so I can't wait till I finish the documentation. Thank you — abdelghafour arabs, Mar 10 '15 at 12:33
So many of these questions, did you even try searching for this? — Pete, Mar 10 '15 at 12:33
@Pete If you compare the two topics you'll find that mine is not duplicated please consider next time comparing posts then you can judge. — abdelghafour arabs, Mar 10 '15 at 12:36
Are you not wanting to select the last child with a particular class? A quick search brings up lots of options - all js based, perhaps you should try researching a little harder before posting next time. read the top few paragraphs: http://stackoverflow.com/help/how-to-ask — Pete, Mar 10 '15 at 12:38

score 2 · Accepted Answer · answered Mar 10 '15 at 12:28

2

Use jQuery:

jQuery('.owl-item.active').last().css('background-color', 'blue')

EDIT:

The .css('background-color', 'blue') part is only an example. jQuery('.owl-item.active').last() gets the last Element.

answered Mar 10 '15 at 12:28

Der Vampyr

941
1
7
13

`jQuery('.owl-item.active:last')` – Jai Mar 10 '15 at 12:30
This is what I want, I will accepted as the answer as soon as I will be able to do that (After 10 min). Thank you – abdelghafour arabs Mar 10 '15 at 12:30
3

@Jai: See the "additional notes" on the [`:last` documentation](http://api.jquery.com/last-selector/) for why `.last()` may be preferred. – T.J. Crowder Mar 10 '15 at 12:31
1

@T.J.Crowder I absolutely confirm that. http://jsperf.com/jquery-last-selector-vs-last-method – Robin Leboeuf Mar 10 '15 at 12:34

How to target last child of specific class

1 Answers1