Separators between elements without hacks

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 t开发者_如何学编程his 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.

---

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.

---

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/

---

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.

---

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;
}

---

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:

• https://www.w3schools.com/cssref/sel_not.asp
• https://www.w3schools.com/csSref/sel_last-of-type.asp

---

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>