Comma-separated spans with pure CSS

Question

I have - let's say - 4 spans on my page in a block. The content of each is populated by knockout from my viewmodel. Sometimes contents are empty for several spans. I would like to display them in a nice, comma-separated way, taking possible emptyness into account.

I tried the following HTML and CSS.

VERSION 1

It shows commas for empty spans as well

.comma:not(:last-child):after {
  content: ", ";
}

<span class="comma">A</span>
<span class="comma">B</span>
<span class="comma"></span>
<span class="comma">D</span>

VERSION 2

It shows a (visually) last comma if last span is empty.

.comma:not(:empty):not(:last-child):after {
  content: ", ";
}

<span class="comma">A</span>
<span class="comma">B</span>
<span class="comma">C</span>
<span class="comma"></span>

How could I tweak it to render always correctly, no matter where the gaps are (if any)? I need to support only modern browsers (IE9+ and others).

Thank you everyone for your efforts, the answer from @FabrizioCalderan looks the most promising currently. — Zoltán Tamási, Jan 08 '15 at 10:40

Fabrizio Calderan · Accepted Answer · 2021-03-23T08:11:37.657

I reversed the logic, placing the comma as the content of before pseudoelement and I managed the case where also the first span can be empty.

.comma:not(:first-child) {
  margin-left: -.3em;  
}

.comma:first-child:empty ~ .comma:not(:empty) {
  margin-left: 0;  
}

.comma:first-child:empty ~ .comma:not(:empty) ~ .comma:not(:empty) {
  margin-left: -.3em;  
}

.comma:empty {
  display: none;
}

.comma:not(:first-child):before {
  content: ", ";
}

.comma:empty + .comma:not(:empty):before {
  content : "";
}

.comma:not(:empty) ~ .comma:empty + .comma:not(:empty):before {
  content : ", ";
}

<div> 
  <span class="comma">A</span>
  <span class="comma">B</span> 
  <span class="comma">C</span>
  <span class="comma">D</span>
</div>

<hr />

<div>
  <span class="comma">A</span>
  <span class="comma">B</span> 
  <span class="comma"></span>
  <span class="comma">D</span>
</div>

<div>
  <span class="comma">A</span>
  <span class="comma">B</span> 
  <span class="comma">C</span>
  <span class="comma"></span>
</div>

<div>
  <span class="comma"></span>
  <span class="comma">B</span> 
  <span class="comma">C</span>
  <span class="comma">D</span>
</div>

<div>
  <span class="comma">A</span>
  <span class="comma"></span> 
  <span class="comma">C</span>
  <span class="comma">D</span>
</div>

<div>
  <span class="comma">A</span>
  <span class="comma">B</span> 
  <span class="comma"></span>
  <span class="comma"></span>
</div>

<div>
  <span class="comma">A</span>
  <span class="comma"></span> 
  <span class="comma">C</span>
  <span class="comma"></span>
</div>

<div>
  <span class="comma">A</span>
  <span class="comma"></span> 
  <span class="comma"></span>
  <span class="comma">D</span>
</div>

<div>
  <span class="comma"></span>
  <span class="comma">B</span> 
  <span class="comma">C</span>
  <span class="comma"></span>
</div>

<div>
  <span class="comma"></span>
  <span class="comma">B</span> 
  <span class="comma"></span>
  <span class="comma">D</span>
</div>

<div>
  <span class="comma"></span>
  <span class="comma"></span> 
  <span class="comma">C</span>
  <span class="comma">D</span>
</div>

<div>
  <span class="comma">A</span>
  <span class="comma"></span> 
  <span class="comma"></span>
  <span class="comma"></span>
</div>

<div>
  <span class="comma"></span>
  <span class="comma">B</span> 
  <span class="comma"></span>
  <span class="comma"></span>
</div>

<div>
  <span class="comma"></span>
  <span class="comma"></span> 
  <span class="comma">C</span>
  <span class="comma"></span>
</div>

<div>
  <span class="comma"></span>
  <span class="comma"></span> 
  <span class="comma"></span>
  <span class="comma">D</span>
</div>

<hr />
All empty:
<div>
  <span class="comma"></span>
  <span class="comma"></span> 
  <span class="comma"></span>
  <span class="comma"></span>
</div>

Further information about :empty pseudoclass available on MDN

that's because last-child is used to select the last child element of a parent element. It cannot be used to select the last child element with a specific class under a given parent element. [check this out](http://stackoverflow.com/questions/18995362/css-last-child-not-working-as-expected) — maioman, Jan 08 '15 at 09:54
Thanks, this looks the most promising I think, I'm gonna test it soon. — Zoltán Tamási, Jan 08 '15 at 10:39

score 7 · Answer 2 · answered Jan 08 '15 at 09:39

7

Switch it round. Instead of putting a comma after your spans, put it before each span which is preceded (any distance back!) by a non-empty span:

.comma:not(:empty) ~ .comma:not(:empty):before {
  content: ", ";
}

Fiddle

answered Jan 08 '15 at 09:39

Chowlett

45,935
20
116
150

This leaves that ugly space. – Jack hardcastle Jan 08 '15 at 09:44
Combining this with Fabrizio's `margin-left: -.3em;` should do the trick. – Alex Jan 08 '15 at 09:57
@Jackhardcastle not if you don't have spaces between html tags ([fiddle](http://jsfiddle.net/9p4x70h8/)). This is just how HTML [works](https://blog.nightly.mozilla.org/2016/10/17/devtools-now-display-white-space-text-nodes-in-the-dom-inspector/). – Mariusz Pawelski Feb 05 '21 at 12:32

score 0 · Answer 3 · answered Jan 08 '15 at 09:46

0

http://jsfiddle.net/xtrabhwh/3/

<span class="comma">A</span><span class="comma">B</span><span class="comma">C</span><span class="comma"></span>

.comma ~ .comma:not(:empty):before {
    content: ", ";
}

answered Jan 08 '15 at 09:46

Jack hardcastle

2,748
4
22
40

1

The reason the are all on the one line is otherwise there is a space added after each span (where the nl character is). – Jack hardcastle Jan 08 '15 at 09:47

SW4 · Answer 4 · 2015-01-08T10:23:34.463

The below should do it, for just about any combination, without hiding anything.

.comma:before {
  content: ','
}
.comma:empty:before,
.comma:first-of-type:before,
.comma:first-of-type+.comma:empty:before,
.comma:empty+.comma:not(:last-of-type):before,
.comma:empty+.comma:empty:before {
  content: '';
}

<h4>Missing first</h4>
<div>
  <span class="comma"></span>
  <span class="comma">item</span>
  <span class="comma">item</span>
  <span class="comma">item</span>
</div>
<h4>Missing last</h4>
<div>
  <span class="comma"></span>
  <span class="comma">item</span>
  <span class="comma">item</span>
  <span class="comma">item</span>
</div>
<h4>Missing first two</h4>
<div>
  <span class="comma"></span>
  <span class="comma"></span>
  <span class="comma">item</span>
  <span class="comma">item</span>
</div>
<h4>Missing last two</h4>
<div>
  <span class="comma">item</span>
  <span class="comma">item</span>
  <span class="comma"></span>
  <span class="comma"></span>
</div>
<h4>Missing middle</h4>
<div>
  <span class="comma">item</span>
  <span class="comma">item</span>
  <span class="comma"></span>
  <span class="comma">item</span>
</div>
<h4>Missing middle two</h4>
<div>
  <span class="comma">item</span>
  <span class="comma"></span>
  <span class="comma"></span>
  <span class="comma">item</span>
</div>

this is clean but an extra comma appears when last two elements are empty — Fabrizio Calderan, Jan 08 '15 at 10:05
@FabrizioCalderan - see revision, and use cases - the revised rule passes each — SW4, Jan 08 '15 at 10:24
Nice but... almost: if you have only D an extra comma still appears. Good job anyway. — Fabrizio Calderan, Jan 08 '15 at 10:28

Comma-separated spans with pure CSS

4 Answers4