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.

Answer 1

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.