5 Replies - 455 Views - Last Post: 10 August 2012 - 03:56 PM

#1 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6048
  • View blog
  • Posts: 23,473
  • Joined: 23-August 08

UL/LIs and Commas

Posted 09 August 2012 - 08:03 AM

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

Is This A Good Question/Topic? 0
  • +

Replies To: UL/LIs and Commas

#2 Luckless  Icon User is offline

  • </luck>
  • member icon

Reputation: 292
  • View blog
  • Posts: 1,146
  • Joined: 31-August 09

Re: UL/LIs and Commas

Posted 09 August 2012 - 08:39 AM

: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
Was This Post Helpful? 1
  • +
  • -

#3 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6048
  • View blog
  • Posts: 23,473
  • Joined: 23-August 08

Re: UL/LIs and Commas

Posted 09 August 2012 - 09:18 AM

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!
Was This Post Helpful? 0
  • +
  • -

#4 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,425
  • Joined: 28-November 09

Re: UL/LIs and Commas

Posted 09 August 2012 - 10:01 AM

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.
Was This Post Helpful? 2
  • +
  • -

#5 Luckless  Icon User is offline

  • </luck>
  • member icon

Reputation: 292
  • View blog
  • Posts: 1,146
  • Joined: 31-August 09

Re: UL/LIs and Commas

Posted 10 August 2012 - 05:44 AM

JackOfAllTrades, I am no web developer either, I just dabble in it so I can know what people are talking about :bigsmile: Thumbs up Lemur
Was This Post Helpful? 0
  • +
  • -

#6 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,425
  • Joined: 28-November 09

Re: UL/LIs and Commas

Posted 10 August 2012 - 03:56 PM

We front-end folks hate IE as well. I'm a hybrid, so I feel pain all around on that one.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1