16
Suppose I have a few adjacent elements:
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
styled with the following:
.container > div {
display:inline-block;
white-space:nowrap;
}
Since we're using display:inline-block, the divs will flow as inline elements. What I would like to do is to be able to specify a CSS rule that should be applied when sibling divs are laid out on the same line (i.e. there is no line break inserted inbetween).
As an example, let's assume that the divs above are laid out as in the following diagram:
[ 1 ][ 2 ][ 3 ][ 4 ]
[ 5 ][ 6 ]
I would like to write a CSS rule that either matches elements 2, 3, 4 and 6 (i.e. divs with sibling(s) laid out on the same line) or the inverse set (elements 1 and 5, i.e. divs with no prior siblings laid out on the same line).
This would be really useful for styling, e.g. (supposing ++ is the selector I'm looking for)
.container > div ++ .container > div {
/* separator between elements on the same line */
border-right:1px solid #000;
}