Let me give you a bit of background: I'm currently working on creating a layout where the elements flow from left to right in one row, then switch to flowing from right to left in the next row, and so on. To better illustrate what I mean, I have created a mockup in CodePen, which you can check out by following the link.
To achieve this layout, I have used the CSS property nth-child, but it's a bit 'hardcoded', for example:
Here's a snippet of the HTML:
<ul>
<li>1</li>
<li>2</li>
...
<li>16</li>
</ul>
And here's the corresponding CSS:
li { float: left; }
li:nth-child(5),
li:nth-child(6),
li:nth-child(7),
li:nth-child(8) {
float: right;
}
While this method works, it is limited to a specific number of elements (as defined in the CSS). I know that I can use :nth-child(4n) to target every fourth element, but what I really want is to target not just one group of four elements, but also the following group of four. It's almost like using nth-child(odd), but for groups of 4 elements.
Is there a way to achieve this programmatically? I've looked into Quantity Queries (), but it doesn't seem to be exactly what I need...
I would greatly appreciate any help or guidance on this matter! Thank you!