0

In this bootply, I want every 3n+1 col-lg-4 to be cleared. It works when the col-lg-12 is not present but this defeats the purpose of nth-of-type no?

Can someone point out what I'm doing wrong here?

<div class="container">
  <div class="row">
    <div class="col-lg-12">col12 ignore</div>
    <div class="col-lg-4">a</div>
    <div class="col-lg-4">b</div>
    <div class="col-lg-4">c</div>
    <div class="col-lg-4">d</div>
  </div>
</div>

.col-lg-4:nth-of-type(3n+1){
    clear: left;
    color: red;
}

Thanks in advance

rory
  • 1,490
  • 3
  • 22
  • 50
  • I am not sure exactly what you are trying to achieve, but it cannot be done easier with a rearrangement of cols, or an adjustment of their sizes? For instance, if this is coming out of PHP you could insert new rows dynamically in a loop. – mayersdesign Mar 21 '17 at 08:49
  • 3
    There is no `nth-` class selector. These pseudo-classes work only on types and not any arbitrary selector. – Abhitalks Mar 21 '17 at 08:51
  • type === element (short version) – FelipeAls Mar 21 '17 at 09:02
  • You could consider the case(s) where there's one (two, etc) `.col-lg-12` `.col-lg-4:nth-of-type(3n+1), .col-lg-12 ~ .col-lg-4:nth-of-type(3n+2) { /* something */ }` (you must also cancel the rule for (3n+1) => `.col-lg-12 ~ .col-lg-4:nth-of-type(3n+1) { /* cancel */ }`) - [Bootply](http://www.bootply.com/CDX5ukGznN) - but any other solution will be more robust both in the rendered page and in your project code, less messy, etc ;) – FelipeAls Mar 21 '17 at 09:09
  • 1
    The purpose of nth-of-type is which element type, not class, so if you change the `col-lg-12` to a span it will work – Asons Mar 21 '17 at 09:12
  • May I ask if you try to have _rows_ without using a _row_ div? – Asons Mar 21 '17 at 09:15
  • @Abhitalks can you write it as answer please so I can mark it as correct. Cheers – rory Mar 21 '17 at 09:30

0 Answers0