Get last instance of a class under a parent with CSS

Question

Is there a way to select the nth-child or last-child of a specific type of class among the same elements?

ie

if I use .small:last-child or ul .small:last-child that property will only affect the very last element of the second list. Is there a selector that I can use to select the last instance of small in each list?

<ul>
    <li class="small">List Item</li>
    <li class="small">List Item</li>
    <li class="medium">List Item</li>
    <li class="large">List Item</li>
</ul>
<ul>
    <li class="medium">List Item</li>
    <li class="large">List Item</li>
    <li class="small">List Item</li>
    <li class="small">List Item</li>
</ul>

Please see fiddle CSS Line 72 for reference

http://jsfiddle.net/j7wq12v2/

http://stackoverflow.com/questions/7298057/css-last-child-selector-select-last-element-of-specific-class-not-last-child-i it is not supported — Vitorino fernandes, Jul 27 '15 at 16:48

Nikhil Aggarwal · Accepted Answer · 2015-07-27T16:49:40.040

3

:last-child only works when the element in question is the last child of the container, not the last of a specific type of element. We could have used last-of-type

Unfortunately finding the last .class is not possible with last-of-type.

We need to use javascript in order to achieve the result.

edited Jul 27 '15 at 16:49

answered Jul 27 '15 at 16:39

Nikhil Aggarwal

28,197
4
43
59

I tried that, and it still does not apply the property. Let me try and reproduce with a fiddle. – Adjit Jul 27 '15 at 16:41
Ok, so I guess it is not possible. I will just manually add a "last" class to counter the issue - it's not a big deal hardcoding this for 6 elements – Adjit Jul 27 '15 at 16:52
I think that is all you can do – Nikhil Aggarwal Jul 27 '15 at 16:53

score 2 · Answer 2 · edited May 23 '17 at 12:14

2

Edit: actually, it may not be possible to use the last-of-type psuedo selector on classes, check this answer to a similar question.

edited May 23 '17 at 12:14

Community

1
1

answered Jul 27 '15 at 16:48

sowasred2012

695
1
7
22

Get last instance of a class under a parent with CSS

2 Answers2