Can one use CSS :nth-child (or similar) to select batches of elements in HTML, e.g every other 4 nodes?

Question

Bit of background: I'm trying to achieve a layout where the elements flow left-to-right on one row, then right-to-left on the next row, and so on.. I've mocked up something in CodePen, have a look here (it explains it better than I can!)

I've achieved the above example using nth-child but it's 'hardcoded', e.g.

HTML:

<ul>
  <li>1</li>
  <li>2</li>
  ...
  <li>16</li>
</ul>

CSS:

li { float: left; }

li:nth-child(5),
li:nth-child(6),
li:nth-child(7),
li:nth-child(8) {
  float: right;
}

Now, this works but it's obviously limited to a specific number of elements (how many I put in the CSS!). I know I can do :nth-child(4n) to get every fourth element, but I want to be able to select that and the next 4. It's almost like nth-child(odd), but for groups of 4 elements.

Is there a way to do this programmatically? I have looked at tweaking Quantity Queries (http://alistapart.com/article/quantity-queries-for-css) but that doesn't seem quite what I'm after...

Any help greatly appreciated!!

Answer 1

Yes, you can use a group of nth-child selectors like in the below snippet to select a repeating group of elements based on a pattern.

One thing to note is that selecting every 4th element and the next 4 after it is equivalent to selecting all elements after the 4th element and hence I have restricted the sample to just the next 2 elements.

---

Explanation of the selector (selects 4th, 5th, 8th, 9th elements and so on):

• nth-child(4n+4) - selects 4th (4*0 + 4), 8th (4*1 + 4), 12th (4*2 +4) elements
• nth-child(4n+5) - selects 5th (4*0 + 5), 9th (4*1 + 5), 13th (4*2 + 5) elements.

As you can see from the explanation, the series starts from the 4th element and repeats from then on. If your need is to start with the series from the 1st element (say 1st, 2nd, 5th, 6th etc) then you could use the selector group as div:nth-child(4n+1), div:nth-child(4n+2).

div:nth-child(4n+4), div:nth-child(4n+5){
  color: red;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>

---

Explanation of the selector (selects 4th, 5th, 12th, 13th elements and so on):

• nth-child(8n+4) - selects 4th (8*0 + 4), 12th (8*1 + 4), 20th (8*2 +4) elements
• nth-child(8n+5) - selects 5th (8*0 + 5), 13th (8*1 + 5), 21th (8*2 + 5) elements.

As you can see from the explanation, the series starts from the 4th element and repeats from then on. If your need is to start with the series from the 1st element (say 1st, 2nd, 5th, 6th etc) then you could use the selector group as div:nth-child(4n+1), div:nth-child(4n+2).

div:nth-child(8n+4), div:nth-child(8n+5){
  color: red;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>