Add semicolon after each element except last

On a couple of my pages
http://www.trimboli.name/rune/goblinmagic.html
http://www.trimboli.name/rune/labyrinth.html
I've got a number of definition lists concerning "Points Spent" and
"Points Earned."

A style sheet
http://www.trimboli.name/rune/section.css
makes the list definitions inline and adds "; " after each one (under
"Encounter costs and mechanics" in the style sheet).

I've experimented with ways to not display a semicolon after the final
item, but so far I haven't had any success. Can someone point me in the
right direction?

(I don't want to change the HTML because an inline list isn't
necessarily the only way I'd want to style the lists.)

David
Stardate 7058.0

re: Add semicolon after each element except last

David Trimboli wrote:....by using .points li:after { content: "; "; }. This doesn't work on
all browsers, BTW.
Personally, based on your example and the kind of person I am, I'd drop
the styling and do the punctuation by hand. But I see you don't like
that idea...
So, you really have some unknown number of <LI>s, or some other kind of
element (which you haven't named and I can't imagine), and you want a
semi-colon after each of these elements (whatever they are) except for
the last one.

How do you know when it's "the last one"?

--
John

re: Add semicolon after each element except last

David Trimboli wrote:How about the HTML change of adding an id to each last <lielement?

The following patch works for me.

I treated just some of your lists, not all, for brevity.

Index: trimboli/labyrinth.html
================================================== =================
--- trimboli.orig/labyrinth.html
+++ trimboli/labyrinth.html
@@ -106,7 +106,7 @@
<h4>Points Spent</h4>
<ul>
<li><span class="cost">0</span(Difficulty 6)</li>
- <li><span class="cost">25</span(10/20 falling damage)</li>
+ <li id="last"><span class="cost">25</span(10/20 falling
damage)</li>
</ul>
</div>

@@ -145,7 +145,7 @@
<div class="points earned">
<h4>Points Earned</h4>
<ul>
- <li><span class="cost">−8</span(Freestanding Difficulty
+ <li id="last"><span class="cost">−8</span(Freestanding
Difficulty
8)</li>
</ul>
</div>
@@ -195,7 +195,7 @@
<div class="points earned">
<h3>Points Earned</h3>
<ul>
- <li><span class="cost">−5</span(Freestanding Difficulty
+ <li id="last"><span class="cost">−5</span(Freestanding
Difficulty
10)</li>
</ul>
</div>
@@ -222,14 +222,14 @@
only)</li>
<li><span class="cost">15</span(3 dice damage)</li>
<li><span class="cost">10</span(armor-ignoring)</li>
- <li><span class="cost">0</span(remains in effect)</li>
+ <li id="last"><span class="cost">0</span(remains in
effect)</li>
</ul>
</div>

<div class="points earned">
<h4>Points Earned</h4>
<ul>
- <li><span class="cost">−20</span(conditionally avoidable
+ <li id="last"><span class="cost">−20</span(conditionally
avoidable
singular roll)</li>
</ul>
</div>
Index: trimboli/section.css
================================================== =================
--- trimboli.orig/section.css
+++ trimboli/section.css
@@ -27,6 +27,7 @@ a:visited, #header a:link, #title, h1, h
.points ul { list-style-type: none; margin-top: 0; }
.points li { display: inline; }
.points li:after { content: "; "; }
+.points li#last:after { content: ""; }

/* Encounter synopsis */

re: Add semicolon after each element except last

David Trimboli wrote:
These look automatically generated ?

So stick <li class="last-item" on the last <liin each list's HTML
and make the CSS selector turn off content for this last item. It's
admittedly a change to the HTML, but it's not one that's likely to
break anything else.

re: Add semicolon after each element except last

David Trimboli escribió:Instead of adding a semicolon AFTER each item(except the last) you could
add a semicolon BEFORE each item (except the first). CSS2 has a seudoclass
selector :first-child to apply a different style to the first element of a
collection.

..points li:before { content: "; "; }
..points li:first-child:before { display: none }


But I don't know if this is supported by most browsers.
--
Manuel Collado - http://lml.ls.fi.upm.es/~mcollado

re: Add semicolon after each element except last

Manuel Collado wrote:It isn't, and as long as we're talking about not yet supported pseudo
selectors, :last-child is also one (albeit CSS3) :-)
http://www.w3.org/TR/css3-selectors/#pseudo-classes

For reference, CSS2:
http://www.w3.org/TR/REC-CSS2/selector.html


Oh, the joy it would bring and the cleaning up for classes I could do if
only the :nth-child & E[foo] selectors were universally supported. Then
again, it's like Christmas: the anticipation is half the fun...
--
Rik Wasmus

re: Add semicolon after each element except last

John Hosking wrote:I know. It's still easily readable in those that don't support it, though.
Exactly the problem.

David
Stardate 7060.6

re: Add semicolon after each element except last

Kaz Kylheku wrote:You mean a class, right? An ID must be unique in a document.

David
Stardate 7060.6

re: Add semicolon after each element except last

Andy Dingley wrote:No, I typed 'em out by hand in Vim. I did often use global search and
replace functions to do some of the repetitive stuff, like ABBRs and CITEs.
Yes, this seems to be the general consensus. It certainly won't break
anything, but I was trying to avoid marking things up for purely
stylistic reasons, and <li class="last-item"has no business being
there except for stylistic reasons, even if it is structurally correct.

Ah, well. Thanks for the response!

David
Stardate 7060.6

re: Add semicolon after each element except last

Rik wrote:Y'know, I tried something like this, but I think I got the
pseudo-selector wrong, and it didn't work. I've tried it this way, and
it works fairly nicely! Style sheet updated. Thanks!

The only thing I have to figure out how is if it's possible to get rid
of the extra space between each item and its trailing semicolon.

Yeah, but it's such a minor detail that I'm not going to worry about
nonconforming browsers in this case. Serves 'em right!
Ahhh!

David
Stardate 7060.7