Add semicolon after each element except last

[David Trimboli]

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

[John Hosking]

David Trimboli wrote:

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

....by using .points li:after { content: "; "; }. This doesn't work on
all browsers, BTW.

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

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

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

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

[Kaz Kylheku]

David Trimboli wrote:

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

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 */

[Andy Dingley]

David Trimboli wrote:

http://www.trimboli.name/rune/goblinmagic.html

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.

[Manuel Collado]

David Trimboli escribió:

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

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

[Rik]

Manuel Collado wrote:

David Trimboli escribió:

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

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.

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

[David Trimboli]

John Hosking wrote:

David Trimboli wrote:

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

...by using .points li:after { content: "; "; }. This doesn't work on
all browsers, BTW.

I know. It's still easily readable in those that don't support it, though.

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

Exactly the problem.

David
Stardate 7060.6

[David Trimboli]

Kaz Kylheku wrote:

David Trimboli wrote:

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

How about the HTML change of adding an id to each last <lielement?

You mean a class, right? An ID must be unique in a document.

David
Stardate 7060.6

[David Trimboli]

Andy Dingley wrote:

David Trimboli wrote:

> http://www.trimboli.name/rune/goblinmagic.html

These look automatically generated ?

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.

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.

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

[David Trimboli]

Rik wrote:

Manuel Collado wrote:

>David Trimboli escribió:

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

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 }

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.

>But I don't know if this is supported by most browsers.

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

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

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.

Ahhh!

David
Stardate 7060.7