Nth-Child Repeat in a Loop

Repeat nth-child values

You can use .box:nth-child(4n+x) as your selector. This answer explains it well.

.container {

  display: grid;

  grid-template-columns: 100px 100px 100px 100px;

}

.box {

  border: 1px solid black;

  height: 100px;

}

.box:nth-child(4n+1) {

  background: red;

}

.box:nth-child(4n+2) {

  background: blue;

}

.box:nth-child(4n+3) {

  background: yellow;

}

.box:nth-child(4n+4) {

  background: pink;

}

<div class="container">

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

</div>

Using CSS :nth-child to create loop with 5 different designs repeated every 5 items

The problem is how you're defining the formula. The formula in the nth-child selector goes as follows:

nth-child(an+b)

Where a is the size of your cycle (in your case, 5), and b is the offset value (or modulo).

Here's a working snippet:

.collection-list:nth-child(5n+0) .collection-item {background-color: red;}

.collection-list:nth-child(5n+1) .collection-item {background-color: blue;}

.collection-list:nth-child(5n+2) .collection-item {background-color: green;}

.collection-list:nth-child(5n+3) .collection-item {background-color: yellow;}

.collection-list:nth-child(5n+4) .collection-item {background-color: purple;}

<div class="collection-list"><div class="collection-item">1</div></div>

<div class="collection-list"><div class="collection-item">2</div></div>

<div class="collection-list"><div class="collection-item">3</div></div>

<div class="collection-list"><div class="collection-item">4</div></div>

<div class="collection-list"><div class="collection-item">5</div></div>

<div class="collection-list"><div class="collection-item">6</div></div>

<div class="collection-list"><div class="collection-item">7</div></div>

<div class="collection-list"><div class="collection-item">8</div></div>

<div class="collection-list"><div class="collection-item">9</div></div>

<div class="collection-list"><div class="collection-item">10</div></div>

Using :nth-child to loop through children LI elements

EDIT / EXTENDED ANSWER

You can use .your_class:nth-child(10n+1), .your_class:nth-child(10n+2) etc. as selectors. "10" is the "step size": for example 3n would be every third, so 10n is every tenth. Counting starts at zero by default, so 10n alone would apply to the 10th, 20th, 30th etc. The "+1" is an offset by 1.

To start at number one, you use 10n+1. This will select the 1st, 11th, 21st etc. child.

If you write 10n+2, this selects the 2nd, 12th, 22nd, 32nd etc. child

So you need 10 rules with different selectors starting at 10n+1, 10n+2 up to 10n+10 which contain the different settings you want to apply.

Here is an example:

.container {
  width: 320px;
  height: auto;
  margin: 20px auto;
}
.x {
  float: left;
  width: 60px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}
.x:nth-child(10n+1) {
  background: #ff0;
}
.x:nth-child(10n+2) {
  background: #af0;
}
.x:nth-child(10n+3) {
  background: #f0a;
}
.x:nth-child(10n+4) {
  background: #b5f;
}
.x:nth-child(10n+5) {
  background: #2f7;
}
.x:nth-child(10n+6) {
  background: #7df;
}
.x:nth-child(10n+7) {
  background: #4ac;
}
.x:nth-child(10n+8) {
  background: #73f;
}
.x:nth-child(10n+9) {
  background: #7cb;
}
.x:nth-child(10n+10) {
  background: #29f;
}

<div class="container">
  <div class="x">1</div>
  <div class="x">2</div>
  <div class="x">3</div>
  <div class="x">4</div>
  <div class="x">5</div>
  <div class="x">6</div>
  <div class="x">7</div>
  <div class="x">8</div>
  <div class="x">9</div>
  <div class="x">10</div>
  <div class="x">11</div>
  <div class="x">12</div>
  <div class="x">13</div>
  <div class="x">14</div>
  <div class="x">15</div>
  <div class="x">16</div>
  <div class="x">17</div>
  <div class="x">18</div>
  <div class="x">19</div>
  <div class="x">20</div>
  <div class="x">21</div>
  <div class="x">22</div>
  <div class="x">23</div>
  <div class="x">24</div>
  <div class="x">25</div>
  <div class="x">26</div>
  <div class="x">27</div>
  <div class="x">28</div>
  <div class="x">29</div>
  <div class="x">30</div>
  <div class="x">31</div>
  <div class="x">32</div>
</div>

Is it possible to loop a pattern of :nth-child styles?

If I understood correctly:

div:nth-child(n+23){ ... }    
div:nth-child(n+47){ ... }    
div:nth-child(n+71){ ... }
...

http://jsfiddle.net/dUXrC/

But if you just want to repeat the same styles after every 23 DIVS:

div:nth-child(23n+1){ ... }    
div:nth-child(23n+2){ ... }   
div:nth-child(23n+3){ ... }    
...

http://jsfiddle.net/dUXrC/1/

CSS - Animation repeat after last nth-child animation ends

This can be done with different animations for each rectangle:

#main {

  width: 10%;

  margin: 3em auto;

  background: #dadada;

  padding: 10px;

}

#col {

  width: 100%;

  display: block;

}

.upper, .lower {

  background: #fafafa;

  display: inline-block;

  width: 47.99%;

  height: 60px;

  -webkit-transition: all ease-in-out 0.3s;

  -moz-transition: all ease-in-out 0.3s;

  -ms-transition: all ease-in-out 0.3s;

  -o-transition: all ease-in-out 0.3s;

  transition: all ease-in-out 0.3s;

  -webkit-animation: scale .4s;

  -moz-animation:    scale .4s;

  -o-animation:      scale .4s;

  animation:         scale .4s;

}

.upper:nth-child(1){

  background: #e03318; /* RED */

}

.upper:nth-child(2){

  background: #0daa34; /* GREEN */

}

.lower:nth-child(1){

  background: #1662dd; /* BLUE */

}

.lower:nth-child(2){

  background: #d1b608; /* YELLOW */

}

.upper:nth-child(1) { 

  animation: scale-1 2s infinite;

}

.upper:nth-child(2) { 

  animation: scale-2 2s infinite;

}

.lower:nth-child(1) { 

  animation: scale-3 2s infinite;

}

.lower:nth-child(2) { 

  animation: scale-4 2s infinite;

}

@-webkit-keyframes scale {

  50%  { transform: scale(0.2); }

  100% { transform: scale(1); }

}

@keyframes scale-1 {

  0%  { transform: scale(1); }

  12.5%  { transform: scale(0.2); }

  25% { transform: scale(1); }

}

@keyframes scale-2 {

  25%  { transform: scale(1); }

  37.5% { transform: scale(0.2); }

  50% { transform: scale(1); }

}

@keyframes scale-3 {

  50%  { transform: scale(1); }

  62.5% { transform: scale(0.2); }

  75% { transform: scale(1); }

}

@keyframes scale-4 {

  75%  { transform: scale(1); }

  87.5% { transform: scale(0.2); }

  100% { transform: scale(1); }

}

<div id="main">

  <div id="col">

    <div class="upper"></div>

    <div class="upper"></div>

  </div>

  <div id="col">

    <div class="lower"></div>

    <div class="lower"></div>

  </div>

</div>

nth child without duplication in css

You can use :nth-child with equation in an+b format(where replace a and b with an integer and n would be 0, 1, 2,....).

li:nth-child(-n+10) {

  color: red

}

<ol>

  <li>a</li>

  <li>a</li>

  <li>a</li>

  <li>a</li>

  <li>a</li>

  <li>a</li>

  <li>a</li>

  <li>a</li>

  <li>a</li>

  <li>a</li>

  <li>a</li>

  <li>a</li>

  <li>a</li>

  <li>a</li>

  <li>a</li>

  <li>a</li>

  <li>a</li>

</ol>

SASS function to iterate nth-child(n+1) and lighten/darken($color, 5n%)

I think you can try :

@for $i from 2 through 7 {
  li:nth-child(#{$i}) {
      background-color: lighten($color, ($i - 1) * 5%);
  }
}