1

I have three left floated containers per row on my website with 33% width and I would like to provide the first of the new row with the attribute clear: both, because there are 12 containers.

Is there an easier way to determine the selector? Here is my approach:

.container:nth-of-type(4), .container:nth-of-type(7), .container:nth-of-type(10) {
    clear: both;
}

I've also tried something with "3n", but it I didn't work for me...

I know it doesn't work... but is there something like this?

.container:nth-of-type(4,7,10) {
    clear: both;
}

Or are there better approaches? Every answer is appreciated, thanks.

.container {
  width: calc((100% - 120px)/3); /* calc because of the padding */
  padding: 0px 20px;
  height: 300px;
  background-color: red;
  float: left;
  display: block;
}

.container:nth-of-child(4), .container:nth-of-child(7), .container:nth-of-child(10) {
  clear: both;
} 
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
Syno
  • 1,056
  • 10
  • 25
  • 1
    4,7 and 10 should be represented with 3n+1 I think – AN1BRA Apr 17 '19 at 14:56
  • @syno checkout my answer will solve your issue – Praveen Apr 17 '19 at 14:58
  • You should really think about converting to using something other than floats - they shouldn't be needed now we have css3 – Pete Apr 17 '19 at 15:54
  • possible guidance using css flexboxes [here](https://stackoverflow.com/questions/39504320/5-items-per-row-auto-resize-items-in-flexbox/39504642#39504642) - its 5 items in a row there, you can modify it for your use-case – kukkuz Apr 17 '19 at 16:29

3 Answers3

1

The nth-of-type pseudoselector works like an algebraic equation. If you use nth-of-type(3n), it's going to target the 0th, 3rd, 6th, etc. elements. You need to add 1, making it nth-of-type(3n+1) to target the 1st, 4th, 7th, etc.

.container {
  width: calc((100% - 130px)/3); /* calc because of the padding */
  padding: 0px 20px;
  height: 300px;
  background-color: red;
  border: 1px solid black;
  float: left;
  display: block;
}

.container:nth-of-child(3n+1) {
  clear: both;
}
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
Nick
  • 1,392
  • 1
  • 13
  • 20
0

Try using this code

.container:nth-child(3n+1){
    clear: both;
}
Praveen
  • 985
  • 8
  • 31
0

you can use :nth-of-type(3n+4), but with clear:both the selected container will be the only one in the row. Use clear: left instead.

mtk
  • 67
  • 1
  • 5