tags:

views:

70

answers:

2

I have match listings dynamically generated. After each member I display a li that displays VS within it. However the very last ul li in the div match shouldnt be visible. Any ideas how I can do that? HTML

<style>
    .match {
    }
    .match ul {
    }
    .match ul li {
        float: left;
        margin-right: 50px;
    } 
    .match ul li:last-child {
        display: none;
    }
</style>

  <div class="content">
    <div class="match">
      <ul>
        <li><a href="/wade-barrett/member">Wade Barrett</a></li>
        <li style="">VS</li>
      </ul>

      <ul>
        <li><a href="/shaemus/member">Shaemus</a></li>
        <li style="">VS</li>
      </ul>

      <ul>
        <li><a href="/randy-orton/member">Randy Orton</a></li>
        <li style="">VS</li>
      </ul>

      <ul>
        <li><a href="/john-cena/member">John Cena</a></li>
        <li style="">VS</li>
      </ul>

      <ul>
        <li><a href="/edge/member">Edge</a></li>
        <li style="">VS</li>
      </ul>

      <ul>
        <li><a href="/chris-jericho/member">Chris Jericho</a></li>
        <li style="">VS</li>
      </ul>

      <p class="clear"></p>
    </div>
  </div>
+4  A: 

The :last-child pseudo-class should apply to the ul, not li, because you want VS text of the last ul of the list to be hidden. By applying the pseudo-class to li, you're applying styles to the last li of every ul, which is incorrect.

You should also apply a class attribute to the li elements with the VS text so that it's more convenient to match with a class selector.

Change

<li style="">VS</li>

to

<li class="vs">VS</li>

And use this instead of your current :last-child selector:

.match ul:last-child li.vs {
    display: none;
}
BoltClock
+3  A: 

What browser are you using, IE does not support it. The latest version of the other browsers do, but I would recommend placing a class on it to make it 100%.

Dustin Laine
No, the spec says `:last-child` was only introduced in [CSS3](http://www.w3.org/TR/css3-selectors/#last-child-pseudo). There is no mention of `:last-child` in the [CSS2 spec](http://www.w3.org/TR/CSS2/selector.html). +1 for browser support issues though.
BoltClock
Sorry, you know I did not realize that `last-child` was not in CSS2 when `first-child` is. Thanks for pointing that out, I have removed that from my answer.
Dustin Laine
@Dustin Laine: that's alright. It *is* rather strange they didn't think to introduce `last-child` till CSS3...
BoltClock