[JackOfAllTrades]

I'm a no-style, CSS dumbass, so I need a hand.

I have a list of strings, and I want to have commas after all but the last.

Here's an example UL:

<ul class="my_list">
  <li class="my_list_entry">Entry 1</li>
  <li class="my_list_entry">Entry 2</li>
  <li class="my_list_entry">Entry 3</li>
</ul>

And here's the CSS I'm using to produce a comma-separated list:

.my_list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.my_list li {
  display: inline
}

.my_list li:after {
  content: ", ";
}

Which generates commas after ALL the lis, as you'd expect.

Now you would think there was some way to use :not(last-child) on that last one to do this, but I can't seem to get any variation of it to work. Am I wrong in thinking that is a valid way of accomplishing this?

Thanks!
-Jack

[Luckless]

:not isn't supported in IE so you'll probably need to find a different way. try this in your css:

.my_list li {
  display: inline
}
.my_list li.comma:after{
  content: ", ";
}

Make your class "comma" for the <li>s you want to be comma separated. I know it"s not ideal =\ I'll keep thinking

[JackOfAllTrades]

Thanks, Luckless. Damn IE! I tend to be a back-end developer, and work on a Mac, so I forget about that.

Your use of a special class did give me a thought, though. Thanks!

[Lemur]

There's no need to use a class on all the li's, just specify them under a classed UL.

ul.class li{etc}

...and make sure to have a class on the last one or use nth element to detect the last element so it doesn't put a comma after it.

[Luckless]

JackOfAllTrades, I am no web developer either, I just dabble in it so I can know what people are talking about Thumbs up Lemur

[Lemur]

We front-end folks hate IE as well. I'm a hybrid, so I feel pain all around on that one.