Chipe Chipe - 6 months ago 20
HTML Question

Stagger :nth-child after initial selection?

I cant seem to get this working. I need to start with the 11th

li
and color ever 7th
li
after that initial 11th selected

HTML:

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


CSS

div:nth-child(11){
color:#00b2ee;
}

Answer

You need to use li:nth-child(7n+11) because the first element that needs to be selected is the 11th element (this goes in the b of the an + b) and then from there on every 7th element should also get selected (and so the 7 goes in the a part of the an + b).

In the snippet, I have also included a demo for li:nth-of-type(7n+11). Both the selectors work the same way for li elements because only li elements are allowed to be directly present under ul and hence there are no chance for other type of child elements to be present.

li:nth-child(7n+11) {
  color: #00b2ee;
}
li:nth-of-type(7n+11) {
  background: beige;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
</ul>