CODEWITHSUNDEEP
css
Karolína Vyskočilová
Karolína Vyskočilová

Reputation: 1325

Tricky :nth-child selector

I have spent a while with solving the following problem:

I would love to wrap the "infinite" number of floated div by four in column (and different for smaller media width) by adding clear:left to the each fifth element;

I made a fiddle where it works just fine. https://jsfiddle.net/kybernaut/zqnkxa3h/1/

But no matter whatever I do, in the real situation the layout gets broken (two last items are wrongly wrapped, when I set it back to :nth-child(4n+1), it breaks a different way completely. Is there anything I'm missing on that page? I have no idea how to fix it myself. The class is .bundled_product

Upvotes: 1

Views: 58

Answers (2)

Marvin
Marvin

Reputation: 10092

All of your .component-data containers have a first child .kbnt-items and a second child .min_max_items. The last .component-data container is missing the .kbnt-items child, that's why the third child of this container is the second .bundled_product here.

<div class="component_data">
  <div class="kbnt-items">0/1</div> <!-- missing in your last component_data... -->
  <div class="min_max_items"></div>
  <div class="bundled_prodct">...</div> 
  <div class="bundled_prodct">...</div> <!-- ... that's why this one is the '4n+3' element -->
</div>

Upvotes: 2

Johannes
Johannes

Reputation: 67748

Your last item has the class ..bundled_product:nth-child(4n+3) which contains clear: left, that's why it is put in a new line.

Upvotes: 1

Related Questions