Value 1
Geek asks and answers

Separators between possible hidden spans

I have a number of gaps forming an enumeration:

<span class="item">Value 1</span><span class="delim">, </span>
<span class="item">Value 2</span><span class="delim">, </span>
<span class="item">Value 3</span>

This is normal when everyone itemhas it display:inline, but when I add a class c display:noneto the second itemrange, the result is as follows:

Value 1, Value 2

I could not find a solution to this problem in CSS, and using JS is undesirable (the code that switches the visibility is already very complicated).

Any ideas?

UPDATE. . Currently, all proposed solutions do not take into account the fact that ANY of the itemspans can be hidden or visible, and not just the second. The problem is not only a double comma in the middle, but also an extra comma at the end.

+3
source share
4

, :

.item.active ~ .item.active:before {
    content: ', ';
}

, , .

+1

CSS:

.item:before{
    content: ", ";
}
.item:first-child:before{
    content: "";
}

http://jsfiddle.net/8aEhz/

+3

, ?

http://jsfiddle.net/whQxW/

.hidden {
    display: none;
}

.hidden + .delim {
    display: none;
}

1, 3

: http://css-tricks.com/child-and-sibling-selectors/. , - .

+2

, . , , :

<span class="item">Value 1<span class="delim">, </span></span>
<span class="item">Value 2<span class="delim">, </span></span>
<span class="item">Value 3</span>
+1

More articles:


All Articles