CSS selector for line breaks

Question

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

Answer 1

There is no such option in CSS, although it would be useful. You could detect it in javascript by retrieving positioningdata, like it's Y offset from the document. When it is different, you can add classnames for alternate styling. Just a quick jQuery example:

var topOffset;
$(document).ready(function(){
    $('.container div').each(function(index){
        if (index === 0) {
          // first item, set offset
          topOffset = $(this).offset().top;
          $(this).addClass('new-row');
        } else if (topOffset < $(this).offset().top){
          // new item, new row

          $(this).addClass('new-row');
          topOffset = $(this).offset().top;
        }
    });
});

This should result in:

<div class="container">
  <div class="new-row">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div class="new-row">5</div>
  <div>6</div>
</div>

This can be styled appropiatly using the class selectors.

EDIT Working example on jsFiddle

Note: does not work on resize, but that can be fixed when you move it into a function that is called on window resize.