CSS selector for :last-child in a subset selection

Question

assuming i have a structure like this (and can't modify it):

<ul>
    <li class="common">   <p>First A</p>   </li>
    <li class="common">   <p>Second A</p>   </li>
    <li class="common">   <p>Third A</p> </li>
    <li class="common">   <p><b>SELECT ME</b></p>   </li>
    <li>   <p>First B</p>   </li>
    <li>   <p>Second B</p>   </li>
    <li>   <p>...</p>   </li>
</ul>

Is there a way to select the last element with class "common"? (in this case the fourth element)

First i tried selecting a subset with:

.common{
    background: red;
}

and it worked correctly. So i tried selecting last-child of them, with:

.common:last-child{
    background: green;
}

but not luck. i also would like to avoid adding a class for that element.

Jsfiddle

EDIT: i simplified classes and selectors to make it cleaner

@Akshay as i said, just in this case is the fourth element, i can't know his index for sure, that's why i needed :last-child. thanks anyway — pumpkinzzz, Nov 17 '15 at 10:59
yep, that can be easily done with js, i know. but i was looking for a pure css solution, thanks anyway — pumpkinzzz, Nov 17 '15 at 11:23
You're probably looking for `nth-match` (which doesn't exist yet in many browsers). See http://www.w3.org/TR/selectors4/#the-nth-match-pseudo. — , Nov 17 '15 at 12:55
Possible duplicate of [nth-child doesn't respond to class](http://stackoverflow.com/questions/5428676/nth-child-doesnt-respond-to-class) — , Nov 17 '15 at 12:56

score 6 · Accepted Answer · edited Nov 17 '15 at 12:38

6

Is there a way to select the last element with class "common"?

No, not with a CSS selector without modifying the HTML.

edited Nov 17 '15 at 12:38

pumpkinzzz

2,907
2
18
32

answered Nov 17 '15 at 11:14

BoltClock

700,868
160
1,392
1,356

score 0 · Answer 2 · answered Feb 22 '16 at 14:28

0

what about

.common:last-of-type {
  background: green;
}

answered Feb 22 '16 at 14:28

Victor Hernandez de Crespo

61
6

score -2 · Answer 3 · edited Nov 17 '15 at 11:48

-2

You can use JavaScript or jQuery

$('custom').prev().css('color', 'red');

edited Nov 17 '15 at 11:48

m4n0

29,823
27
76
89

answered Nov 17 '15 at 11:21

bnnoor

656
2
13
31

This is a comment, not an answer. – Alex Nov 17 '15 at 11:27

gvperkins · Answer 4 · 2015-11-17T12:29:37.127

-2

If your not against a JS route you could do this

$('li.common.custom').first().prev('.common').css('background','yellow');

It finds the first element that has both .common and .custom classes and then goes to the previous element. So its technically the last element that only has .common

https://jsfiddle.net/89z20341/

Is the structure going to stay exactly as you have coded it? eg with the bold tags on the element you want to select?

if so could you just do this

.common p b{
background: green;
display:block;

}

http://jsfiddle.net/seLm589s/4/

edited Nov 17 '15 at 12:29

answered Nov 17 '15 at 11:45

gvperkins

168
2
9

Comment to downvoters: this code is fine. With CSS OP can't make it. – Marcos Pérez Gude Nov 17 '15 at 11:47
But question not about js/jQuery solutions. Using js it is trivial to do. – z1m.in Nov 17 '15 at 11:49
nope, that bold was just to underline the element. and the style i want to apply is on the .common element, not his children – pumpkinzzz Nov 17 '15 at 12:32

CSS selector for :last-child in a subset selection

4 Answers4