milov.nl: comma-separated list elements in css

How to display <ul> elements as a flat comma-separated list ~~(now in effect in the main menu and links list in the left-hand column)~~:

ul.links { list-style: none; margin: 0; padding: 0; }
ul.links li { display: inline; }
ul.links li:after { content: ","; } 
ul.links li:last-child:after { content: ""; }

The advantage of this is that changing the default separator from a comma to | or - or whatever now means only having to change one character in the stylesheet.

Note: Internet Explorer doesn't support the css content attribute or :after and :last-child pseudo-classes, so the commas won't appear in IE.

posted Wednesday, January 12, 2005

comments

1. posted by Low at 23:06 on January 12, 2005

This seems to be working in Firefox (that is to say, I just checked it with edit-css ^_^):

ul.links li:after { content: ","; }
ul.links li:last-child:after { content: ""; }

Now the commas aren't part of the hyperlink, which I prefer. :)

2. posted by Milo at 23:09 on January 12, 2005

Good point! That's what I was going for actually :)
I've updated the code sample (and my stylesheet).

3. posted by Low at 23:16 on January 12, 2005

I'd even consider using...

ul.links li:last-child:after { content: "."; }

...because of all the commas. I think it looks better with a full-stop at the end. But hey, that's just me.

4. posted by Anne at 08:02 on January 13, 2005

In that case you could even make it more fancy, work with ::before and add a & just before the end or 'and'.

5. posted by Milo at 09:02 on January 13, 2005

Hmm, I don't think either a '.' or an 'and' are fitting here, since this is not really a sentence, just a listing. I mean, "experiments and random", whazat??

6. posted by Milo at 11:17 on January 13, 2005

By the way Anne, to make your idea work, won't I need some sort of :second-to-last selector to prevent the comma appearing before the "and"? (note the 'Related categories' list, I just tried it there)

7. posted by Arve at 12:07 on January 13, 2005

ul.links li::before { content: ","; }
ul.links li:first-child:before { content: ""; }
ul.links li:last-child::before { content: " and "; }

Example output:

One, two, three and four

8. posted by Milo at 12:15 on January 13, 2005

I considered that, but it actually results in

One ,two ,three and four

which is not quite the same.

9. posted by Frenzie at 13:13 on January 13, 2005

It wouldn't appear as

One ,two

but as

One,two

which would be easy to solve by

content: ", "

10. posted by Milo at 13:58 on January 13, 2005

It'll always look like "One, two" or "One ,two" unless I remove all whitespace from between the <li>-elements (which I don't intend to do), or "white-space-collapse: discard;" was actually possible. http://fantasai.inkedblade.net/style/specs/css3-text/scratchpad

11. posted by Low at 14:04 on January 13, 2005

> unless I remove all whitespace

I was gonna say that; you beat me to it. Anyway, if you _would_ remove the whitespace or if the css3 rule would work, my vote would go out to:

ul.links li:before { content: ", "; }
ul.links li:first-child { text-transform: capitalize; }
ul.links li:first-child:before { content: ""; }
ul.links li:last-child:before { content: " and last but not least: "; }
ul.links li:last-child:after { content: "."; }

I was going for something like "ul.links li:first-child:first-letter { text-transform: uppercase; }", but that didn't work.

:)

12. posted by Milo at 14:12 on January 13, 2005

Strange, trying to make your last example work, I thought

ul.links li:first-child a:first-letter { text-transform: uppercase; }

*would* work, but it also doesn't.

13. posted by Low at 14:40 on January 13, 2005

Yeah, tried that too...

14. posted by Mathieu 'P01' HENRI at 14:53 on January 13, 2005

ul.links:first-letter { text-transform: uppercase; }

works ;)

15. posted by Anne at 15:22 on January 15, 2005

Quite bad that you can't locate my favicon Milo ;-)

Re #6, I'll post an example later if I can get it to work.

16. posted by Milo at 15:40 on January 15, 2005

Re: http://annevankesteren.nl/img/favicon.png
Your favicon is black-on-transparent, and too large (32x32) to be visible as a background-image in your name-link, meaning it won't even show now that I've fixed the detection! :)

« FonzTeeVee - Murals for ROC AMSTERDAM | Main | Logitech F-Lock Key Eliminator »

weblog/photolog by Milo Vermeulen milov.nl

my latest photos