user595438 user595438 - 8 months ago 46
CSS Question

Using nth type to select grid items with an odd sequence

So I have this grid type with posts that keeps appearing as you scroll down.

Please See the picture to see what I mean

enter image description here

Notice that the selections are 2,3, 6,7, 10,11, 14,15 and so on.. And I can't seem to get any CSS nth of type formula working to derive these results.

Anybody got an idea on how to make such a selection? Any help would be appreciated.

Answer Source

It would be 4n+2 and 4n+3 to repeat every 4th element starting from 2 and 3

.wrapper {
  width: 100px;
}
.wrapper div {
  float: left;
  width: 50px;
  box-sizing: border-box;
  height: 50px;
  border: 1px solid #ddd;
}

.wrapper div:nth-child(4n+2),
.wrapper div:nth-child(4n+3) {
  background-color: green;
}
<div class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download