milov.nl: comma-separated list elements in css

Milo

Sat, 15 Jan 2005 14:40:46 GMT

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! :)

Anne

Sat, 15 Jan 2005 14:22:05 GMT

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.

Mathieu 'P01' HENRI

Thu, 13 Jan 2005 13:53:37 GMT

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

Low

Thu, 13 Jan 2005 13:40:57 GMT

Yeah, tried that too...

Milo

Thu, 13 Jan 2005 13:12:21 GMT

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

Thu, 13 Jan 2005 13:04:31 GMT

> 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

Thu, 13 Jan 2005 12:58:25 GMT

It'll always look like "One, two" or "One ,two" unless I remove all whitespace from between the

-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

Frenzie

Thu, 13 Jan 2005 12:13:55 GMT

It wouldn't appear as One ,two but as One,two which would be easy to solve by content: ", "

Milo

Thu, 13 Jan 2005 11:15:34 GMT

I considered that, but it actually results in One ,two ,three and four which is not quite the same.

Arve

Thu, 13 Jan 2005 11:07:19 GMT

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

Thu, 13 Jan 2005 10:17:14 GMT

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)

Milo

Thu, 13 Jan 2005 08:02:17 GMT

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??

Anne

Thu, 13 Jan 2005 07:02:26 GMT

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

Low

Wed, 12 Jan 2005 22:16:45 GMT

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.

Milo

Wed, 12 Jan 2005 22:09:34 GMT

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

Low

Wed, 12 Jan 2005 22:06:01 GMT

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. :)