Question

Suppose you have a container (div) and a bunch of nested inline-block or floated divs.
http://jsfiddle.net/D6PgE/

.container { width : 300px; }
.inner     { width : 100px; }

<div class="container">
    <div class="inner"> 1 </div>
    <div class="inner"> 2 </div>
    <div class="inner"> 3 </div>
    <div class="inner"> 4 </div>
    <div class="inner"> 5 </div>
    <div class="inner"> 6 </div>
    <div class="inner"> 7 </div>
    <div class="inner"> 8 </div>
    <div class="inner"> 9 </div>
</div>

What is the best way to select elements that have been wrapped? Is it possible to select the nth element of a wrapped row (in the fiddle it would be the odd numbers).

The only thing I can think of is to use JS and compare the offsetTop position of the elements; however I haven’t kept up with CSS lately and know that its becoming ever more powerful, so is there a CSS solution? -thanks

---

Edit
I am trying to select the nth-element of a “row”. The issue is that there are no rows as this is not a table. I should also add that my example was simple because the widths may very, so there may be more or elements per line – therefore something like nth-child will not work

Answer 1

No, there is no CSS solution that will work with unknown/dynamic sizes, as selectors cannot select based on how elements are being laid out or how their styles are computed.

You will need to use JS to obtain and work with that kind of information.