Geek Answers Handbook

Is it possible to use CSS: nth-child (or similar) to select batches of elements in HTML, for example, all the other 4 nodes?

A bit of background: I'm trying to create a layout where the elements go from left to right in one line, then from right to left in the next line, etc. I was mocking something about CodePen , look here (this explains it better than I can!)

I reached the above example using nth-child , but it is hardcoded, for example

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 it works, but it is clearly limited by a certain number of elements (how much I added in CSS!). I know what I can do :nth-child(4n) to get every fourth element, but I want to be able to select this and the next 4. This is almost like nth-child(odd) , but for groups of 4 elements.

Is there any way to do this programmatically? I looked at changing the number of requests ( http://alistapart.com/article/quantity-queries-for-css ), but this is not like what I'm after ...

Any help is much appreciated !!

+8
css css-selectors css3
source share
2 answers

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

It should be noted that the selection of each 4th element and the next 4 after it is equivalent to the selection of all elements after the 4th element, and therefore I limited the selection to only the following two elements.

Selector explanation (selects 4, 5, 8, 9 elements, etc.):

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

As you can see from the explanation, the series starts from the 4th element and repeats from now on. If you need to start with a series of the 1st element (e.g. 1st, 2nd, 5th, 6th, etc.), you can 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>

Selector explanation (selects 4th, 5th, 12th, 13th elements, etc.):

  • nth-child(8n+4) - selects the 4th (8 * 0 + 4), 12th (8 * 1 + 4), 20th (8 * 2 + 4) elements
  • nth-child(8n+5) - selects the 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 now on. If you need to start with a series of the 1st element (e.g. 1st, 2nd, 5th, 6th, etc.), you can 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>
+5
source share

In addition to this, if you want to choose children 5,6,7,8 out of 16, you can use

 :nth-child(n+5):nth-last-child(n+9)

Maybe you yourself will find out what this does;)

0
source share

More articles:


All Articles