milov.nl

Interaction design • webdevelopment • web art • photography

January 2005

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.



Low wrote on 2005/01/12:
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. :)


Milo wrote on 2005/01/12:
Good point! That's what I was going for actually :)
I've updated the code sample (and my stylesheet).


Low wrote on 2005/01/12:
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.


Anne wrote on 2005/01/13:
In that case you could even make it more fancy, work with ::before and add a & just before the end or 'and'.


Milo wrote on 2005/01/13:
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??


Milo wrote on 2005/01/13:
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)


Arve wrote on 2005/01/13:
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


Milo wrote on 2005/01/13:
I considered that, but it actually results in

One ,two ,three and four

which is not quite the same.


Frenzie wrote on 2005/01/13:
It wouldn't appear as

One ,two

but as

One,two

which would be easy to solve by

content: ", "


Milo wrote on 2005/01/13:
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


Low wrote on 2005/01/13:
> 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.

:)


Milo wrote on 2005/01/13:
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.


Low wrote on 2005/01/13:
Yeah, tried that too...


Mathieu 'P01' HENRI wrote on 2005/01/13:
ul.links:first-letter { text-transform: uppercase; }

works ;)


Anne wrote on 2005/01/15:
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.


Milo wrote on 2005/01/15:
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! :)