Edit Question - KnowledgeHub

Title Body

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 div s 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 div s are laid out on the same line (i.e. there is no line break inserted inbetween). As an example, let's assume that the div s 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. div s with sibling(s) laid out on the same line) or the inverse set (elements 1 and 5, i.e. div s 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; }

Tags (comma-separated) Cancel