I told Milo I could come up with something that makes the list use an “&” at the end. Apparently the version I made many years ago did not have any whitespace between the LI elements which makes it a lot easier. This time I created one with whitespace although I did have to use some sort of "hack" (display:block;float:left). Unfortunately Opera does not support the CSS 3 selector :last-child so the example only works in Mozilla based browers on Windows. I am not sure about Safari. It does degrade gracefully in Opera though, it is not really a major problem.
To make the example work in IE as well I used _display:inline;_float:none.
Here is the example: How to display UL elements as a flat comma-separated list. Something that might be a problem in Opera is that it also does not support the
+ selector so you need to apply clear:both on the next-sibling element of UL yourself.
@Anne, last time I checked Opera supported '+' selector.
Actually Moose effectively used it in his CSS Destroy two years ago.
Boy, Safari does something weird here: it separates every word with an ampersand, as if the :last-child wasn't in the selector. Or maybe it treats every LI as last-child ?
Safari does support :last-child normally, and Opera has supported the + for quite a while :^)
You shouldn't have used the ampersand though (use and instead), it is meant to group two words. Read these and see the difference:
The fallback in Opera is quite acceptable, but seeing that & as the last separator in Firefox is indeed a nice touch.
On my personal site I use display:inline-block; for the list elements, which means I don't have to worry about floats and clears and all that. Downside is of course that it doesn't work in Firefox :)
Wow, for a moment there I was sure it wasn't possible... but you proved me wrong. Most impressive!
It's nice, but too bad it's copied as a list when copy-pasting.
It's a very cool trick for the semantically keen. I like it very much.
Possibly the only depressing thing about this is that I've got a 2 & a half month old unfinished entry on my blog which works in the same way. I think there's a lesson in 'finishing stuff' in here something... Excellent example page though, Anne - lovely and concise.
Although rather breaking class semantics, you can also make these lists appear inline within a block of text by making the previous block level element "inline" as well. It's maybe a bit hackish, but means you can get flowing lists within your text blocks.
Technically, there's an argument within all this for the HTML spec allowing the use of some list-type within paragraphs...
Works in KHTML/Konqueror 3.3.91.
Two points I want to note about this otherwise excellent example:
Other than that, good stuff, I like the use of an & for the last item, makes it far more interesting.
Since when does the validator support CSS 3? :last-child is not part of CSS 2.1. If you are talking about the two line Internet Explorer hack, I guess you are able to remove that yourself.
Instead of the underscore hack you can also use a conditional comment for IE, which I think is more graceful because it is a documented feature and it doesn't present validation issues ;)
I'm using this to make the menus on my website to be.
Oh, please don't bother looking at that in IE :)
nice stuff, I have a bug report though: when the list is inside a smaller element and the elements need to wrap, the wrap happens before the comma, so you get commas at the start of your line of text instead of at the end.
I changed the CSS around a bit, but there is still one extra comma at the end before the ampersand. any ideas?
Perhaps using li{white-space:nowrap}? I haven't really tested it yet though.