- This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
Viewing 12 posts - 1 through 12 (of 12 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hey guys, I wanna target the last li of class “test” within an ul, for example
<ul>
<li class="test">1</li> <-- I want to target this guy
<li>2</li>
<li>3</li>
<li class="test">4</li> <-- And this guy
<li>1</li>
<li class="test">2</li>
<li class="test">3</li> <-- And this one over here
<li>4</li>
</ul>
Can this be done with CSS only? if not how can i target em with JS
Sorry, edited – I was misunderstanding…
I don’t know if I get it either, there seems to be a discrepancy between question and code example.
I believe now it is about each last occurrence of .test
in any sequence of one or more…
Not that I can think of a CSS approach by the way.
You are right, is the last occurrence of each .test class on all list items, so what would be a good JS approach to target them? Thanks in advance 4 helping
Can it be using jQuery or would it have to be some code of the vanilla kind?
I might use jQuery to solve this, the thing is I would like to matain the structure in Wich I keep all my items on li tags and add a class to know Wich ones are the last item with the class test when the next one doesn’t have it, thanks again 4 sharing this problem with me :)
No problem, here’s a little something:
Stupid question: couldn’t you just add an ID to those target choices and style that?
This is a non-trivial issue.
There is no single method for selection here. There are multiple conditions that need to be resolved.
Is the item preceded by a .test
, followed by a .test
etc.
Frankly, you’re gonna have several/multiple/nested if
statements….it would probably be easier to refactor your HTML
Nop, the list items are auto generated
jQuery .last()
could do it:
$('test').last().addClass('last-test');
http://codepen.io/FStop/pen/8afcb7500f100fa2d32c1635b148b1ed/