Get last instance of class in element

Question

I am trying to get the last instance of a div with a class of one_third. I have tried many different orders of the :last-child but I can not get them to work.

Here is the structure

<div class="container">
    <div class="one_third">One</div>
    <div class="one_third">Two</div>
    <div class="one_third">Three</div> <-- remove the margin from this one
    <div class="clearfix"></div>
</div>

I tried doing

.container:last-child .one_third { margin-right: 0; }

this removes the margin from ALL divs with that class not just the last one. How can I get this to work? Thanks!

You want to select the last div? use like this `.container>:last-child{color:red;}`. — Kheema Pandey, Aug 15 '14 at 18:44
@zachstames check my updated answer... it may be your best bet here I'm afraid. — nzifnab, Aug 15 '14 at 19:16
Another approach is using `::after` pseudo-element to implement the clearfix hack and then simply select the last child of the container like so: http://jsbin.com/zebuy/1/edit This is used by TW Bootstrap and most of the CSS frameworks as well. — Hashem Qolami, Aug 15 '14 at 19:29
Yes, I also like @HashemQolami solution as well. I think that's a cleaner clearfix hack than the div version anyway and it makes your markup... better. :P — nzifnab, Aug 15 '14 at 19:35
@KheemaPandey - Yes, I believe the consensus from that other post is that it can't be done. If someone comes up with a solution, it should be posted on that earlier thread, and this post should be closed as duplicate. — mbeckish, Aug 15 '14 at 19:43

score 0 · Answer 1 · answered Aug 15 '14 at 18:41

0

.container .one_third:last-child {
}

answered Aug 15 '14 at 18:41

Paulo

172
6

1

Pseudo classes work on elements, not classes of elements. – j08691 Aug 15 '14 at 18:41
@j08691 well that certainly doesn't sound correct. – nzifnab Aug 15 '14 at 18:42
thats because its not! – Paulo Aug 15 '14 at 18:42
@wumm - Since the dawn of HTML – j08691 Aug 15 '14 at 18:43
1

@j08691 http://jsfiddle.net/jz6nw3cf/ This jsfiddle says you're horribly wrong – nzifnab Aug 15 '14 at 18:44
1

@j08691 you're misinformed if you believe thats correct. – Paulo Aug 15 '14 at 18:44
1

@nzifnab - You obvioulsy don't understand what you're doing. Tell me why the last one-third class isn't selected here http://jsfiddle.net/j08691/csuhq3xf/. In your example, the class just happens to match the last child. Bad example. – j08691 Aug 15 '14 at 18:45
2

Because it's not the last child of it's parent. `.one_fourth` is. – nzifnab Aug 15 '14 at 18:46
@nzifnab you are correct – Paulo Aug 15 '14 at 18:46
1

@j08691 According to W3 `E:last-child` selects `an E element, last child of its parent` – idmean Aug 15 '14 at 18:47
@j08691 your example wouldn't work with element selectors either... unless the element you were selecting was the *last child of it's parent* – nzifnab Aug 15 '14 at 18:47
1

okay so thats the issue then because I have a clearfix div as the last element. I though it would ignore that and just look for the last one with that class not the last in the container – Zach Starnes Aug 15 '14 at 18:47
1

To all of you who don't know the spec, `:last-child` selects the last child element of a parent. Period. It has nothing to do with the class of the element. – j08691 Aug 15 '14 at 18:49
@wumm - that's exactly my point. – j08691 Aug 15 '14 at 18:49
so what if I want to place a constrain to find the last element with that class regardless of if its the last in the container? without js – Zach Starnes Aug 15 '14 at 18:49
1

Doesn't work. When I add a 4th element to the container div, with a different class, "Third time" is no longer green. – mbeckish Aug 15 '14 at 18:50
@j08691 but if you have it connected to a selector like `a:last-child` or `.my-class:last-child` then it only works *if the element with that class is the last child of it's parent*. If you connect it to something it has everything to do with the what you've connected it to. – nzifnab Aug 15 '14 at 18:50
Im aware I was asking the question to find a way to do that – Zach Starnes Aug 15 '14 at 18:51
@zachstarnes - Like this http://stackoverflow.com/questions/7298057/css-last-child-selector-select-last-element-of-specific-class-not-last-child-i?rq=1? – j08691 Aug 15 '14 at 18:52
Watch out for using `last-of-type`, as it may not be fully supported: https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type IE < 9 doesn't like it which will be your main concern. – nzifnab Aug 15 '14 at 18:53
i tried `.container .one-third:last-of-type` and that did not work – Zach Starnes Aug 15 '14 at 18:54
Same, I can't get a fiddle to make that work either. – nzifnab Aug 15 '14 at 18:57
@zachstarnes - You'll need JavaScript. – j08691 Aug 15 '14 at 18:57
yeah thats dumb i thought adding the class would just find the last element with that class instead css ignores that and just does nothing or removes it off of all of them. Stupid. – Zach Starnes Aug 15 '14 at 19:05
1

The `:last-of-type` selector allows you to target the last occurence of an element within its container. this means as soon a new `div` will be added with different class `:last-of-type` won't work. check this link. http://jsbin.com/fudicipevemo/1/edit – Kheema Pandey Aug 15 '14 at 19:07
@j08691: I agree that your very first comment on this answer doesn't really make sense - I would simply say that simple selectors match independently of one another, or do not affect one another. – BoltClock Aug 16 '14 at 04:40

nzifnab · Answer 2 · 2014-08-15T19:41:13.427

0

You might be better off manually adding a last class to your last div, and targetting that. Barring that, you're gonna have to use JS to get the last element with a specific class which is less than ideal.

<div class="container">
    <div class="one_third">One</div>
    <div class="one_third">Two</div>
    <div class="one_third last">Three</div> <-- remove the margin from this one
    <div class="clearfix"></div>
</div>

And your CSS:

.container .one_third.last { margin-right: 0; }

.last-child doesn't work in your instance because that pseudo-selector will only select the last child of it's parent. So it'll work if there are no other kinda of elements after your last one_third div, but it won't work if there are.

last-of-type has it's own set of oddities where it will select based on the element type, not just the class name - regardless of what selector you've used in the CSS. See here for an example: http://jsfiddle.net/YmMZZ/1/

edited Aug 15 '14 at 19:41

answered Aug 15 '14 at 18:41

nzifnab

15,876
3
50
65

Ummm. Why is this getting a negative score? Is something here incorrect? – nzifnab Aug 15 '14 at 18:48
1

Doesn't work. When I add a 4th element to the container div, with a different class, "Third time" is no longer green. – mbeckish Aug 15 '14 at 18:49
As mentioned in the other thread, that's because it's no longer the last child of your parent. You have in fact changed your question since this answer was made -- the answer was correct before your change. – nzifnab Aug 15 '14 at 18:52
1

So delete this answer since it is no longer pertinent? – mbeckish Aug 15 '14 at 18:53
@mbeckish Or I could update the answer ;) – nzifnab Aug 15 '14 at 19:16
1

@nzifnab You should include at least some detail of why `last-child` and `last-of-type` do not work in the answer, as the comments will likely be deleted (as they should be). – Joe Aug 15 '14 at 19:34
Fair enough, I'm on it. – nzifnab Aug 15 '14 at 19:36

score -1 · Answer 3 · answered Aug 15 '14 at 18:41

-1

Try

.container .one_third:last-child { margin-right: 0; }

jsFiddle

answered Aug 15 '14 at 18:41

Code Different

90,614
16
144
163

may you care enough to explain how it DID work in the fiddle, for Firefox and Chrome? – Code Different Aug 18 '14 at 13:39
I already did. Read my comment again. – BoltClock Aug 18 '14 at 13:45
No you didn't. There's nothing incorrect about the fiddle. Even when copied the code into a blank HTML file, it still works as expected. – Code Different Aug 18 '14 at 13:55

score -1 · Answer 4 · edited Aug 15 '14 at 19:31

-1

There is a good article on :nth-last-child here.

I would try:

.container .one-third:nth-last-child(1) { /* ... */ }

edited Aug 15 '14 at 19:31

Hashem Qolami

97,268
26
150
164

answered Aug 15 '14 at 18:44

JamesDullaghan

1,230
11
12

Not a huge fan of this solution as it's brittle. If you have the same markup in another location without the clear hack-fix, then it won't work for selecting that last element anymore :\ I think a better solution might be to use one of the better clear-fixes that have been made available as opposed to the div variation. – nzifnab Aug 15 '14 at 18:59
2

`:nth-last-child(1)` is equivalent to `:last-child` and thus will not work. – BoltClock Aug 16 '14 at 04:33

Get last instance of class in element

4 Answers4