2

I have this code example

<ul>  
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list">test3</li>
    <li>test4</li>
</ul>

Is there is a way to get the last element with class="list"?

It's exactly like this question How do I select the "last child" with a specific class name in CSS? but there is a trick. I can't modify the html code so while this question's solution is good it doesn't work in this case.

Thanks!

PS: I can't use jquery or javascript. Its pure CSS here.

PS2: The element's amount is not always the same
Community
  • 1
  • 1
Laura
  • 53
  • 2
  • 9
  • Is it always 4 items? Than I've got a solution, otherwise I don't.. Than you can use `+` like `.list + .list + .list` = third item. – Niels Oct 25 '13 at 20:15
  • possible duplicate of [How can select first child/last child of class in a mixed container?](http://stackoverflow.com/questions/19416041/how-can-select-first-child-last-child-of-class-in-a-mixed-container) – Josh Crozier Oct 25 '13 at 20:18
  • @Niels You could also use `li:nth-child(3)` (If CSS3 selectors can be used) – Fernker Oct 25 '13 at 20:19
  • @JoshC I think you are right, I didn't saw that one, sorry. By the way, that question has not an answer. And I was investigating in another forums and Im pretty sure there is not a solution for this. So what do I do? – Laura Oct 25 '13 at 20:22
  • 1
    @Laura It's not possible using a selector. You could easily do it with JS, or just do the obvious, and give it an `id`, and style it.. – Josh Crozier Oct 25 '13 at 20:26
  • @JoshC do you mean give an id to element without class? That could work, but in my particular case there it could be more than one element without this class – Laura Oct 25 '13 at 20:36

1 Answers1

1

No you can't. It's strange as you would think that :last-child would get the last matched possibility but it doesn't work that way. :last-child only finds the very last element, even if you did li.list:last-child That only looks for the last child, sees if it's a li, then sees if they have a class of list. If they do then it matches, if not then no match.

If you can possibly use jQuery then you can easily do this such as in this example (and I'm sure there's other ways): http://jsfiddle.net/eW6S5/173/

$('li.list').last().css('color','red');

Fernker
  • 2,238
  • 20
  • 31
  • Yes, Im pretty sure you are right, I was checking in another forums and there was no answer to this question. I should use JQuery, it seems to be the simplest way – Laura Oct 25 '13 at 20:25
  • @Laura if you have no access to the HTML then yes it is the best way. But you said you can't use jQuery. Can you actually use it? – Fernker Oct 25 '13 at 20:26
  • Not yet. It's pretty complicated actually. There are several people working in the code (I'm with the CSS and another person is with the HMTL, other with the PHP, etc.), I can't use the whole code until the other people finish their parts. So in a *future* I could use both HTML and JQuery, I was just wondering if there was a pure CSS solution to accelerate things. – Laura Oct 25 '13 at 20:34