Separators between elements without hacks

Question

One thing I often want to do when laying out a website is to have some elements next to each other, with separators between them. For instance, if I have three elements, I'd want two separators between them, and nothing at either end.

I achieve this in various ways. For vertical stacking of elements, I sometimes use <hr />. Horizontally, I might do something like:

<div>
    <span class="notend">things</span>
    <span class="notend">stuff</span>
    <span>items</span>
</div>

.notend {
    border-right: solid black 1px;
}

Is there a more semantic way of doing this? I want to have separators between elements without putting styling elements into the HTML part, or using non-semantic classes. I don't mind of this requires hacky CSS, I just want to get stuff to do with styling away from the HTML files.

thirtydot · Accepted Answer · 2011-10-11T16:56:48.187

47

Use this:

#menu span + span {
    border-left: solid black 1px;
}

http://jsfiddle.net/thirtydot/QxZ6D/

That will apply border-left to all except the first span.

The adjacent sibling selector (+) is supported in all modern browsers except IE6.

Another way to do it is this, which is sometimes nicer because you can keep all the declarations for the "menu buttons" in one block:

http://jsfiddle.net/thirtydot/QxZ6D/1/

#menu span {
    border-left: solid black 1px;
    /*
    a: bunch;
    of: stuff;
    */
}
#menu span:first-child {
    border-left: 0
}

This has exactly the same level of browser support as the first solution.

Note that if you like this solution, it's better to use :first-child rather than :last-child, because :first-child (from CSS2) is supported in IE7/8 and :last-child (only introduced in CSS3!) isn't.

edited Oct 11 '11 at 16:56

answered Oct 11 '11 at 16:51

thirtydot

224,678
48
389
349

Nice! I wish I'd found that before. – Oliver Oct 11 '11 at 16:52
1

It surprises me how little-known the `+` selector is. Look at all the `:last-child` answers here and elsewhere on the site... – BoltClock Oct 11 '11 at 16:54
IE6 doesn't support something that every other browser in the world does!? I'm so disillusioned... – mclark1129 Oct 11 '11 at 18:23
1

"in all modern browsers except IE6" - why am I implying that IE6 is a modern browser? – thirtydot Nov 18 '11 at 16:12

score 9 · Answer 2 · edited Jun 24 '19 at 14:47

9

you can do like this also:

span {position:relative; margin-left:5px}

span:after {
    content:"|";
    position:absolute;
    left:-5px;
}
span:first-child:after {
    content:"";
}

In this method you can also use others separators like / , \ , .

http://jsfiddle.net/sandeep/UNnxE/

edited Jun 24 '19 at 14:47

Brian Burns

20,575
8
83
77

answered Oct 11 '11 at 16:59

sandeep

91,313
23
137
155

score 4 · Answer 3 · answered Oct 11 '11 at 16:52

4

how about something like this in your example:

<div>
    <span>things</span>
    <span>stuff</span>
    <span>items</span>
</div>

div span{
   border-left: solid black 1px;
}
div span:last-child{
   border:none;
}

no need for additional classes.

answered Oct 11 '11 at 16:52

Andy

29,707
9
41
58

score 2 · Answer 4 · answered Jun 13 '18 at 12:03

I often want to have a series of items with semi-colons between them.

Here's what I do for this:

.semi-list span:not(:last-of-type)::after {
  content: "; ";
 }

<div class="semi-list">
  <span>Item One</span>
  <span>Item Two</span>
  <span>Item Three</span>
</div>

It's a pretty flexible solution.

Ref:

Eric · Answer 5 · 2011-10-11T17:45:47.720

2

Well for a start, you can simplify it to this:

<div>
    <span>things</span>
    <span>stuff</span>
    <span class="end">items</span>
</div>

span {
    border-right: solid black 1px;
}
span.end {
    border-right: none;
}

If you're willing to drop some support in older browsers, you can reduce that to this, using the :last-child pseudo-class:

<div>
    <span>things</span>
    <span>stuff</span>
    <span>items</span>
</div>

span {
    border-right: solid black 1px;
}
span:last-child {
    border-right: none;
}

edited Oct 11 '11 at 17:45

answered Oct 11 '11 at 16:51

Eric

95,302
53
242
374

@Oliver, And in order to achieve "element1 | element2 | element3" you'd probably want to do border-right instead of border-left. Or make the special case class the first element and not the last. – mclark1129 Oct 11 '11 at 16:55
Yeah, I notice that now. I tend to get left & right mixed up (very inconvinient when trying to navigate). – Oliver Oct 11 '11 at 17:06
@MikeC: Good point! I would have spotted that if I'd actually read the code I was writing. – Eric Oct 11 '11 at 17:46

score 1 · Answer 6 · answered Oct 11 '11 at 16:55

Something like this?

CSS:

#note_list span {
    display:inline-block;
     padding:0 10px;
}
.notend {
    border-right:1px solid #000000;
}

HTML:

<div id="note_list">
  <span class="notend">things</span>
  <span class="notend">stuff</span>
  <span>items</span>
</div>

Separators between elements without hacks

6 Answers6

Linked