Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Target last li item groups of class "test" within ul

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #249633

    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

    #249634
    Shikkediel
    Participant

    Sorry, edited – I was misunderstanding…

    #249635
    Atelierbram
    Participant

    I don’t know if I get it either, there seems to be a discrepancy between question and code example.

    #249637
    Shikkediel
    Participant

    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.

    #249638

    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

    #249639
    Shikkediel
    Participant

    Can it be using jQuery or would it have to be some code of the vanilla kind?

    #249640

    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 :)

    #249643
    Shikkediel
    Participant

    No problem, here’s a little something:

    codepen.io/anon/pen/xgxJPE

    #249644
    I.m.learning
    Participant

    Stupid question: couldn’t you just add an ID to those target choices and style that?

    #249646
    Paulie_D
    Member

    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

    #249653

    Nop, the list items are auto generated

    #250016
    Gabriel
    Participant

    jQuery .last() could do it:

    $('test').last().addClass('last-test');

    http://codepen.io/FStop/pen/8afcb7500f100fa2d32c1635b148b1ed/

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.